Javascript 从元素中删除文本而不删除引用

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

这是因为我保留了很多对

myText

的子级的引用。此引用将被删除。我意识到，在简单的情况下，我可以只更新这些引用，但我有一个相当大的文件和许多引用（每次调用此函数时都要更新每个引用会很麻烦并且容易出错）

我还存储了一些对

innerHTML

不可见的数据。例如，我使用

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

在写入

innerHTML

时，此信息将丢失

如果没有

innerHTML

（最好没有jquery），如何替换div中的文本

---

Jsfiddle

您可以使用

DOM

方法（也称为旧的安全方法）

函数替换文本（el、图案、txt）{
对于（var i=0；i您可以使用
DOM
方法（也称为旧的安全方法）

函数替换文本（el、图案、txt）{
对于（var i=0；i，这里有一个解决方案：

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

这里有一个解决方案：

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

这里是我的
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]);
}

函数替换文本（elem）{
if（elem.nodeType===Node.TEXT\u Node）{
elem.nodeValue=elem.nodeValue.replace（/this/gi，'that'））
返回
}
var children=elem.childNodes
for（变量i=0，len=children.length；i

NB这将一个元素作为第一个参数并遍历所有子元素，因此它甚至可以处理复杂的元素

这里是更新的小提琴：
这里是我的
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]);
}

函数替换文本（elem）{
if（elem.nodeType===Node.TEXT\u Node）{
elem.nodeValue=elem.nodeValue.replace（/this/gi，'that'））
返回
}
var children=elem.childNodes
for（变量i=0，len=children.length；i

NB这将一个元素作为第一个参数并遍历所有子元素，因此它甚至可以处理复杂的元素

这里是更新后的提琴：
@Oriol我使用
$
作为
文档的快捷方式。querySelector
（请参阅jsfiddle）@Oriol我使用
$
作为
文档的快捷方式。
createTreeWalker
的querySelector（请参阅jsfiddle）文档似乎很少。您能解释一下它的作用吗？（我猜这是某种过滤/迭代机制）。它的浏览器支持是什么？@soktinpk-See，它有一个部分。把它想象成一组过滤节点上的迭代器。你会发现浏览器的兼容性在底部。下面是@Lucas，它似乎是Internet Explorer（甚至10和11）不支持用于筛选的第二个参数，因此我认为我不能使用此解决方案。Oops。好吧，那么我想你剩下的唯一一件事就是以旧有的方式进行迭代。
createTreeWalker
的文档似乎很少。你能解释一下它的功能吗？（我猜这是某种筛选/迭代机制）。它的浏览器支持是什么？@soktinpk-See，它有一个部分。将其视为一组过滤节点上的迭代器。您将在的底部找到浏览器兼容性。下面是@Lucas，它似乎是Internet Explorer（甚至10和11）不支持用于筛选的第二个参数，因此我认为我不能使用此解决方案。哎呀。好吧，那么我想你剩下的唯一一件事就是以旧有的方式迭代。我相当自信我的元素将只有一层深度，但这对于任何具有更复杂元素的人来说都是一个很好的解决方案。因此，+1无论如何我是公平的我很自信我的元素只有一个层次的深度，但这对于任何拥有更复杂元素的人来说都是一个很好的解决方案
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]);
}