Question

我需要使用JavaScript循环遍历网页的DOM树，并替换单词＆＃39; hipster＆＃39;的每个实例。使用不同的单词除非它是链接或图像src的一部分。例如，如果＆＃39; hipster＆＃39;出现在一个段落中，应该被替换。

但是，如果它位于图片的src=""网址中，则不应该被替换，因为如果它替换了网址中的该字词，则该网址会明显中断。< / p>

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

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

在此页面上试一试！

Answer 2

使用变量代替'hipster'替换：

var replacedText = text.replace(/hipster/gi, 'James Montour');

这些行：

var needle = 'hipster';
var replacement = 'James Montour';
var regex = new RegExp(needle, "gi");
var replacedText = text.replace(regex, replacement);

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

2 个答案: