Javascript 如何使用JQuery替换网页中某个单词的所有出现位置？

我曾两次尝试在Chrome扩展中使用JQuery替换网页中出现的所有单词。这两种尝试都有一定的效果，但都不能作为替换网页中出现的所有单词的通用方法

如何编写脚本来替换网页中出现的某个单词

请继续阅读，了解两种不同尝试的详细信息，这两种尝试都有效，但因不同原因失败

尝试1：替换没有子节点的节点的文本。如果子节点用于格式化，则此操作失败。例如，解析以下内容时失败：

<p>StringToReplace <strong>doesn't</strong> get replaced!</p>

（replaceStrings是一个单独的函数，需要替换一组任意调用）

尝试2：替换可能仅包含文本的节点的HTML（例如

p

）。这失败了，因为我的脚本需要处理的一些网页的文本显示在像body这样的标签中。如果我尝试替换body的HTML，它会产生不希望的副作用，破坏某些页面上的功能。在我看来，试图处理每一个边缘情况都是一场噩梦，在这种情况下，通过替换DOM树上的

body

或

div

s的HTML来削弱站点功能

我在第二次尝试中使用的代码：

$("*").each(function () { 
    if (
        $(this)[0].nodeName.toLowerCase() == "font"
        || $(this)[0].nodeName.toLowerCase() == "span"
        || $(this)[0].nodeName.toLowerCase() == "p"
        //|| $(this)[0].nodeName.toLowerCase() == "body"
        // || $(this)[0].nodeName.toLowerCase() == "div" 
        ){
        $(this).html(replaceStrings($(this).html()));
    }
}

如何编写脚本来替换网页中出现的某个单词

---

谢谢

我还没有完全测试过这一点，但它应该为您指出正确的方向：

$('*', 'body')
    .andSelf()
    .contents()
    .filter(function() {
        return this.nodeType === 3;
    })
    .each(function() {
        this.nodeValue = replaceStrings(this.nodeValue);
    });

---

（基于随附的帮助）

我不喜欢第一个答案中的插件，因为它只适用于1级深度。下面是一个版本，它将遍历选定元素下的整个结构

用法：

$（.content”）.replaceText（“访问者”、“约翰·多伊”）

//将元素中任何地方出现的“search”替换为“Replace”。
//将呈现新的HTML标记，除非“text_only”为true。
$.fn.replaceText=函数（仅搜索、替换、文本）{
返回此.each（函数（）{
风险值v1、v2、rem=[]；
$（this.find（“*”）.andSelf（）.contents（）.each（function（））{
if（this.nodeType==3）{
v1=这个.nodeValue；
v2=v1.替换（搜索，替换）；
如果（v1！=v2）{
如果（！text_only&//.test（v2））{
美元（本）。之前（v2）；
推（这个）；
}
否则，这个.nodeValue=v2；
}
}
});
如果（rem.length）$（rem）.remove（）；
});
};
另一方面，您第二次尝试的选择器可以很容易地写为
$（'font，span，p'）
不需要检查
nodeName
。谢谢roryf，但我已经实现了hubbl的解决方案，它工作得很好，所以我可能不会测试这个。
$('*', 'body')
    .andSelf()
    .contents()
    .filter(function() {
        return this.nodeType === 3;
    })
    .each(function() {
        this.nodeValue = replaceStrings(this.nodeValue);
    });

// Replace occurences of 'search' with 'replace' anywhere in the element. 
// New HTML tags will be rendered, except if 'text_only' is true. 
$.fn.replaceText = function(search, replace, text_only) {  
    return this.each(function(){  
        var v1, v2, rem = [];
        $(this).find("*").andSelf().contents().each(function(){
            if(this.nodeType === 3) {
                v1 = this.nodeValue;
                v2 = v1.replace(search, replace);
                if(v1!=v2) {
                    if(!text_only && /<.*>/.test(v2)) {  
                        $(this).before( v2 );  
                        rem.push(this);  
                    }
                    else this.nodeValue = v2;  
                }
            }
        });
        if(rem.length) $(rem).remove();
    });
};