JavaScript:循环遍历 DOM 树并替换文本？

Question

我需要使用 JavaScript 循环浏览网页的 DOM 树，并将单词“hipster”的每个实例替换为不同的单词，除非它是链接或图像 src 的一部分。例如，如果段落中出现“hipster”，则应将其替换。

但是，如果它位于图像的 src="" 网址中，则不应被替换，因为如果它替换网址中的该单词，则该网址显然会损坏.

我一直很难实现这个。这是我尝试过的一件事:

var items = document.getElementsByTagName("*");
  var i = 0;
  for (i = 0; i < items.length; i++){
     if(i.nodeType == 3){
        i.html().replace(/hipster/gi, 'James Montour');
     }
     else{
       //do nothing for now
     }
  }

Answer 1

你已经很接近了，但是:

• document.getElementsByTagName('*') 永远不会返回文本节点；它仅获取元素(以及旧版本 IE 中的注释节点)

• 文本节点没有 html() 方法

• replace 不会就地修改字符串

考虑到这一点，您可以获取每个元素的每个子元素，检查它们的类型，读取它们的 nodeValue，并在适当的情况下替换整个节点:

var elements = document.getElementsByTagName('*');

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];

    for (var j = 0; j < element.childNodes.length; j++) {
        var node = element.childNodes[j];

        if (node.nodeType === 3) {
            var text = node.nodeValue;
            var replacedText = text.replace(/hipster/gi, 'James Montour');

            if (replacedText !== text) {
                element.replaceChild(document.createTextNode(replacedText), node);
            }
        }
    }
}

在此页面上尝试一下!