Question

我正在试图弄清楚如何在原始javascript（没有jQuery等）中找到具有特定文本的元素并修改该文本。

我的第一个解决方案......不够充分。我做的基本上是：

var x = document.body.innerHTML;
x.replace(/regular-expression/,"text");
document.body.innerHTML = x;

天真的我以为我成功了，但特别是因为它很简单。所以我在我的例子中添加了一个图像，并认为我可以每5秒检查一次（因为这个字符串可能会动态地进入DOM）......并且图像每5秒闪烁一次。

糟糕。

所以，必须有一个正确的方法来做到这一点。一种专门挑出特定DOM元素并更新该DOM元素的文本部分的方法。

现在，总是“递归搜索孩子，直到找到最深的孩子用字符串”方法，我想避免。即便如此，我仍然怀疑“将innerHTML更改为不同的东西”是更新DOM元素的正确方法。

那么，在DOM中搜索字符串的正确方法是什么？什么是更新DOM元素文本的正确方法？

Answer 1

不要将innerHTML与正则表达式一起使用，对于非平凡的内容，它几乎肯定会失败。此外，浏览器如何从实时DOM生成它仍然存在差异。替换innerHTML还将删除作为元素属性添加的任何事件侦听器（例如element.onclick = fn）。

最好是将字符串括在一个元素中，该元素具有可以搜索的属性或属性（id，class等）但是如果不这样做，搜索文本节点是最好的方法。

修改

尝试HTML文档的通用文本选择功能可能会导致非常复杂的算法，因为字符串可能是复杂结构的一部分，例如：

<h1>Some <span class="foo"><em>s</em>pecial</span> heading</h1>

搜索字符串“特殊标题”很棘手，因为它分为2个元素。包装它的另一个元素（比如用于突出显示）也不是一件容易的事，因为生成的DOM结构必须是有效的。例如，上面匹配“some special”的文本可以包含在span中，但不能包含div。

任何此类功能必须附有说明其局限性和最合适用途的文件。

Answer 2

现在，总是“递归搜索孩子，直到找到最深的孩子用字符串”方法，我想避免。

我想在无序的随机列表中搜索元素。现在，有一个“遍历所有元素，直到找到你正在寻找的方法”，我想避免。

老式磁带录音，录音，聆听，冥想。

顺便说一句，请参阅： Find and replace text with JavaScript James Padolsey的博客

Answer 3

忘记正则表达式。

遍历每个文本节点（以递归方式执行将是最优雅的）并在找到文本时修改文本节点。如果只是查找字符串，您可以使用indexOf()。

Answer 4

编辑：根据RobG的建议将querySelectorAll更改为getElementsByTagName。

您可以使用getElementsByTagName函数来获取页面上的所有标记。从那里，您可以检查他们的孩子，看看他们是否有任何文本节点作为孩子。如果他们这样做，你就会看看他们的文字，看看它是否符合你的需要。下面是一个示例，它将使用控制台对象打印文档中每个文本节点的文本：

var elms = document.getElementsByTagName("*"),
    len = elms.length;
for(var ii = 0; ii < len; ii++) {
    var myChildred = elms[ii].childNodes;
    len2 = myChildred.length;
    for (var jj = 0; jj < len2; jj++) {
        if(myChildred[jj].nodeType === 3) {
            console.log(myChildred[jj].nodeValue);

            // example on update a text node's value
            myChildred[jj].nodeValue = myChildred[jj].nodeValue.replace(/test/,"123");
        }
    }
}

要更新DOM元素的文本，只需更新文本节点的nodeValue属性。

Answer 5

x.replace(/regular-expression/,"text");

将返回一个值

var y = x.replace(/regular-expression/,"text");

现在您可以指定新值。

document.body.innerHTML = y;

你想要考虑这个，你不想让整个身体只是改变一小段代码，为什么不得到一个div或任何元素的内容等等

示例：

<p id='paragraph'>
    ... some text here ...
</p>

现在你可以使用javascript

了

var para = document.getElementById('paragraph').innerHTML;
var newPara = para.replace(/regex/,'new content');

para.innerHTML = newPara;

这应该是最简单的方法。

查找具有特定文本的DOM元素并对其进行修改

5 个答案:

修改