问题
我有几个不同的单词需要使用 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>
我从另一个答案改编了代码。但是，这个问题并没有真正被欺骗。
|
收藏
