用 JavaScript 替换 HTML 中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13547270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Replacing Text in HTML with JavaScript
提问by Andrew
I'm trying to write a JavaScript program without the use of jQuery to replace all visible target text on a webpage without messing up the page's functionality.
我正在尝试编写一个 JavaScript 程序而不使用 jQuery 来替换网页上的所有可见目标文本，而不会弄乱页面的功能。
Specifically I'm trying to make a Chrome extension that does it passively on sites such as Facebook.
具体来说，我正在尝试制作一个 Chrome 扩展程序，它可以在 Facebook 等网站上被动地执行此操作。
I've experienced limited success with the following:
我在以下方面取得了有限的成功：
checkLoad();
function checkLoad(){
if (document.readyState === "complete") {
document.body.innerHTML = document.body.innerHTML.replace("target string", "replacement string");
} else {
setTimeout('checkLoad();', 500)
}
}
This code misses things like people's names, titles and such.
这段代码遗漏了诸如人名、头衔等内容。
I've looked around and can't seem to find a working solution. Any ideas?
我环顾四周，似乎找不到可行的解决方案。有任何想法吗？
采纳答案by Bruno Sousa
Simple regular expression to fix it:
简单的正则表达式来修复它：
document.body.innerHTML = document.body.innerHTML.replace(/target string/g, "replacement string");
回答by Joe B.
I'd recommend against replacing the innerHTML for a few reasons from this blog (https://j11y.io/javascript/replacing-text-in-the-dom-solved/):
出于此博客（https://j11y.io/javascript/replacing-text-in-the-dom-solved/）中的几个原因，我建议不要替换innerHTML ：
- You can't guarantee that the text replaced is text. Maybe it's an attribute in the html or other relevant code.
- It resets the document and, in my case, fired my chrome extension again. This led to my extension reloading again and again.
- 您不能保证替换的文本是文本。也许它是 html 或其他相关代码中的一个属性。
- 它会重置文档，在我的情况下，它再次触发了我的 chrome 扩展。这导致我的扩展程序一次又一次地重新加载。
I solved this by downloading the js file from the blog and called it like so:
我通过从博客下载 js 文件解决了这个问题，并像这样调用它：
var regex = new RegExp(targetString, "g");
findAndReplaceDOMText(document.body, {
find: regex,
replace: function(portion) {
var e = document.createElement('span');
e.appendChild(document.createTextNode(replacementString));
return e;
}
});
My use case above wraps the text being replaced in a span tag, so it's slightly different than yours. This javascript function has lots of flexibility.
我上面的用例将被替换的文本包装在 span 标签中，所以它与你的略有不同。这个 javascript 函数有很大的灵活性。
回答by alex_1948511
The link https://j11y.io/javascript/replacing-text-in-the-dom-solved/is cool but I'm not 100% agree with a solution. IMHO walking on DOM could be overkill.
链接https://j11y.io/javascript/replacing-text-in-the-dom-solved/很酷，但我不是 100% 同意解决方案。恕我直言，在 DOM 上行走可能有点矫枉过正。
Here is my tricky solution working on regexp only so can element.innerHTML be used. So that replaces text everywhere except tags and nbsp-like things:
这是我只处理正则表达式的棘手解决方案，因此可以使用 element.innerHTML。这样就可以替换除标签和类似 nbsp 的东西之外的任何地方的文本：
function highlightInHtml(html, textToHighlight) {
const t = textToHighlight'
const tagsRe = new RegExp('(<.+?>|&\w+;)');
const htmlParts = html.split(tagsRe).filter(Boolean);
const r = htmlParts.map( item =>
tagsRe.test(item)
? item
: item.replace(new RegExp(`(${t})`, 'ig'), `<span class="highlight"></span>`)
).join('');
return r;
}
If there is something weak in this solution please let me know!
如果此解决方案中存在弱点，请告诉我！
