在div中替換文本而不影響其中的任何HTML標記

我看到這已被問了很多次。但不幸的是，我還沒有遇到一個簡單的解決方案。大多數解決方案圍繞着div內的多個節點。在div中替換文本而不影響其中的任何HTML標記

所以這裏的問題。我有以下的標記：

<div class="test">Text1<span></span></div>

我需要「文本1」和「文本2」，而不影響連接到span標籤跨度標籤和事件處理程序進行更換。

做一些類似$('.test')html('Text2<span></span>')的確會替換文字。但是，刪除span標籤上的事件處理程序，這是不希望的。我正在尋找一種快速高效的方法。

來源

2012-04-09 John

您打算如何確定要替換的文字？文本總是在第一個標籤之前？ – Brad 2012-04-09 19:21:40

並回應什麼事件？ – 2012-04-09 19:28:09

更改標記（將元素中的文字包裹起來）是迄今爲止最簡單的解決方法。 – 2012-04-09 19:30:59

裹替換文本具有標籤：

<div class="test"><span class="test-text">Text1</span><span></span></div>

來源

2012-04-09 19:23:26 iambriansreed

我想這是迄今爲止最簡單的解決方案。儘管它從未想過我。 Thx相同。 – John 2012-04-09 19:50:54

，如果你想補充的事件處理程序與.live或.on功能（取決於jQuery的版本）的.html（「文本2」）會工作得很好。

來源

2012-04-09 19:25:34 simoncereska

您可以通過contents訪問Text Node本身。現在，如果你知道元素與文本開始，你可以這樣做：

return this.nodeType === 3;

：

$($('.test').contents()[0]).replaceWith('New Text');

現在，如果你不知道該文本節點的數組中的位置，你可以用過濾

並比較文本值（如果你知道這些）。

Fiddle

來源

2012-04-09 19:28:25 Joe

Thx回覆。我看到你在小提琴中工作。但是，不幸的是，在我的陳述結尾處引發了一個非法字符錯誤。 – John 2012-04-09 19:54:20

在該文本被替換總是會先於現有的跨度，它永遠是假設的firstChild和，這將是展開的textNode：

$('.test').click(
    function() { 
     this.firstChild.nodeValue = 'Text2'; 
    });

JS Fiddle demo。

爲了確保只有第一textNode改變，無論在哪裏它是.test元素中發現：

$('.test').click(
    function(e) { 
     var newText = 'Text2', 
      children = e.target.childNodes; 
     for (var i=0,len=children.length;i<len;i++){ 
      if (children[i].nodeName == '#text'){ 
       children[i].nodeValue = newText; 
       return false; 
      } 
     } 
    });

JS Fiddle demo。

來源

2012-04-09 19:31:07

在div中替換文本而不影響其中的任何HTML標記

回答

相關問題