從元素中刪除文本而不刪除引用

我想用某些其他文本替換某些元素（包括兒童中的文本）中的所有文本。例如，HTML從元素中刪除文本而不刪除引用

<div id="myText"> 
    This is some text. 
    This is some other text. 
    <p id="toHide"> 
     This is even more text. 
     Click this text to hide it. 
    </p> 
</div>

應該成爲

<div id="myText"> 
    That is some text. 
    That is some other text. 
    <p id="toHide"> 
     That is even more text. 
     Click That text to hide it. 
    </p> 
</div>

從本質上講，我已經更換了所有的/this/gi與"That"。不過，我不能使用以下命令：

$("#myText").innerHTML = $("#myText").innerHTML.replace(/this/gi, "");

這是因爲我一直有很多引用到的myText孩子。這些參考文獻將被刪除。我意識到，在簡單的情況下，我可以更新這些引用，但我有一個相當大的文件和許多引用（並且每次調用此函數時都會引起麻煩並且每引用都會更新引用）。

我還儲存了一些innerHTML不可見的數據。例如，我使用

$("#toHide").test = "test";

寫入innerHTML時會丟失。

如何更換div中的文本而不使用innerHTML（最好不使用jquery）？

的jsfiddlehttp://jsfiddle.net/prankol57/ZEfM7/

來源

2014-06-30 soktinpk

@Oriol我使用'$'作爲一個快捷方式到'document.querySelector'（見的jsfiddle） – soktinpk

可以使用DOM方法（亦稱老和安全的方式）

function replaceText(el, pattern, txt) { 
    for(var i=0; i<el.childNodes.length; ++i) { 
     var node = el.childNodes[i]; 
     switch(node.nodeType){ 
      case 1: // Element 
       replaceText(node, pattern, txt); continue; 
      case 3: // Text node 
       node.nodeValue = node.nodeValue.replace(/this/gi, "that"); continue; 
     } 
    } 
}

Demo

來源

2014-06-30 19:40:37 Oriol

這裏有一個解決方案：

var n, walker = document.createTreeWalker(document.getElementById("myText"), NodeFilter.SHOW_TEXT); 
while (n = walker.nextNode()) { 
    n.nodeValue = n.nodeValue.replace(/this/ig, "that"); 
}

基本上，走所有的文本節點，並替換它們的值。

爲了更好的兼容性，這裏的一些可重用的代碼：

function visitTextNodes(el, callback) { 
    if (el.nodeType === 3) { 
     callback(el); 
    } 

    for (var i=0; i < el.childNodes.length; ++i) { 
     visitTextNodes(el.childNodes[i], callback); 
    } 
}

然後，你可以這樣做：

visitTextNodes(document.getElementById("myText"), function(el) { 
    el.nodeValue = el.nodeValue.replace(/this/ig, "that"); 
});

來源

2014-06-30 19:41:18

的文檔'createTreeWalker'顯得稀疏。你能解釋它的作用嗎？（我猜這是某種過濾/迭代機制）。它的瀏覽器支持是什麼？ – soktinpk

@soktinpk請參見[MDN文章]（https://developer.mozilla.org/en-US/docs/Web/API/document.createTreeWalker），它具有[瀏覽器兼容性]（https：//developer.mozilla）。 org/en-US/docs/Web/API/document.createTreeWalker＃Browser_compatibility）部分。 – Oriol

把它看作是一組過濾節點的迭代器。您將在[本頁]的底部找到瀏覽器兼容性（https://developer.mozilla.org/en-US/docs/Web/API/document.createTreeWalker）。這裏是[TreeWalker對象文檔]（https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker） –

這裏我的版本的replaceText：

function replaceText(elem) { 
    if(elem.nodeType === Node.TEXT_NODE) { 
     elem.nodeValue = elem.nodeValue.replace(/this/gi, 'that') 
     return 
    } 
    var children = elem.childNodes 
    for(var i = 0, len = children.length; i < len; ++i) 
     replaceText(children[i]); 
}

NB這需要一個元素作爲第一個參數並遍歷所有子元素，因此即使對於複雜元素它也可以工作。

這裏更新的提琴：http://jsfiddle.net/ZEfM7/6/

來源

2014-06-30 20:13:58 Iazel

我相當有信心，我的元素只有一層深，但對於任何擁有更復雜元素的人來說，這都是一個很好的解決方案。無論如何+1 – soktinpk

從元素中刪除文本而不刪除引用

回答

相關問題