Question

我想用一些其他文本替换某些元素中的所有文本（包括子元素中的文本）。例如，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时会丢失。

如何在没有innerHTML的情况下替换div中的文本（最好没有jquery）？

Jsfiddle http://jsfiddle.net/prankol57/ZEfM7/

Answer 1

这是一个解决方案：

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");
});

Answer 2

您可以使用DOM方法（a.k.a.旧的安全方式）

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

Answer 3

这是我的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/

删除元素中的文本而不删除引用

3 个答案: