替换整个页面上多个单词的所有例子

*发表于 2022-5-3 12:05:47* · 发表于 2022-5-3 12:05:47

问题
我有几个不同的单词需要使用 Javascript 替换为不同的单词。我以为我可以使用替换功能来实现这一点，但它似乎只适用于第一次调用。

但是，由于我需要替换的单词彼此相似，这会导致一些问题，我不确定如何解决。我还需要使用 Javascript 而不是 jQuery 来执行此操作。谢谢。

例子：

function color() {
document.body.innerHTML = document.body.innerHTML.replace(/A/g, "<span style='color:#FF0000;'>A</span>");
document.body.innerHTML = document.body.innerHTML.replace(/A1/g, "<span style='color:#0000FF;'>A1</span>");
}

复制代码

<html>
<body>
<h3>A</h3>
<h3>A1</h3>
<button onclick="color()">click</button>
</body>
</html>

复制代码

回答
在几乎所有情况下，body.innerHTML 回复都不应该完成。它似乎可以处理一些琐碎的例子，但对于任何非平凡的应用程序都会失败。不要使用正则表达式解析 HTML。

要了解为什么这是一个严重的问题，请考虑您的文档是否包含以下元素：

<div style="color: #AA144"></div>

您的正则表达式如何知道不将一堆跨度插入每个 A 或 A1 的属性字符串中？将不会。

相反，使用文档对象模型，它是一个表示标记的树结构（所有解析都为您完成！）。遍历树中的节点，对每个节点的textContent进行操作，进行替换：

for (const parent of document.querySelectorAll("body *")) {
for (const child of parent.childNodes) {
if (child.nodeType === Node.TEXT_NODE) {
const pattern = /(A1|A)/g;
const replacement = "<span style='color:#FF0000;'>$1</span>";
const subNode = document.createElement("span");
subNode.innerHTML = child.textContent.replace(pattern, replacement);
parent.insertBefore(subNode, child);
parent.removeChild(child);
}
}
}
body {
background: white;
}
<div>
foobar
<div>
<div style="color: #AA144">
foobazz A1
</div>
foo quuz AA
<h4>coraaAge</h4>
<p>
A bA bAA ello world A1
</p>
</div>
</div>

复制代码

我从另一个答案改编了代码。但是，这个问题并没有真正被欺骗。

[软件设计/软件工程] 替换整个页面上多个单词的所有例子