使用特定文本查找DOM元素并对其进行修改

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

编辑：从 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 3

现在,总是"递归搜索孩子,直到你找到最深的孩子用字符串"方法,我想避免.

我想在无序的随机列表中搜索一个元素.现在,有一个"经历所有元素,直到你找到你正在寻找的方法",我想避免.

老式磁带,录音,听,冥想.

顺便说一句,请参阅:在James Padolsey的博客上用JavaScript查找和替换文本