替换单词出现颜色的问题答案

【问题标题】：Issue with replacing color of word occurrence替换单词出现颜色的问题
【发布时间】：2016-10-14 08:31:47
【问题描述】：

我正在尝试将整个 HTML 页面中“bad”的字体颜色替换为红色，但有两个主要问题，首先它在替换之前重复了整个句子，我不希望这样，而且“badly”中的不好也被替换了，但我只想替换“坏”一词中的字体。我该怎么做？这是我的代码

 window.onload = function() {
   var text = document.getElementById("content");
   var str = text.innerHTML,
     reg = /red/ig;

   var toStr = String(reg);
   var color = (toStr.replace('\/g', '|')).substring(1);

   var colors = color.replace("|");

   if (colors.indexOf("red") > -1) {
     str = str.replace(/bad/g, '<span style="color:red;">bad</span>');
   }


   document.getElementById("updated").innerHTML = str;
 }

<div id="content">are they good or bad, tell me how badly it is if bad.</div>
<div id="updated"></div>

【问题讨论】：

使用\b 或其他任何方式在“红色”周围放置“单词边界”。这样可以防止 redemption 被破坏。
您可能希望将 div 的内容分解为一组单词，然后单独处理每个单词。你应该可以这样做： var ih = document.getElementById('content').innerHTML;var words = ih.split(/\b/g);for(var i=0;i
\b 帮助解决了“坏”的边界，但我仍然没有找到解决重复的方法。 @MarcB
"首先它会在替换之前重复整个句子，我不希望这样"...这是什么意思？

标签： javascript regex str-replace

【解决方案1】：

使用raphael75
str = str.replace(/\b(bad)\b/gi, '<span style="color:red;">$1</span>'); 所说的 \b（单词边界标记）
还有，我：

添加了 i 修饰符，使其不区分大小写（捕获 Bad、BAD、bad）

在正则表达式中封装（错误）以使用 $1 再次调用，这样可以保持大小写（如果大写错误，则保持错误）

var str = "bad incredibad badly Bad, testing bad, bad. bad";
str = str.replace(/\b(bad)\b/gi, '<span style="color:red;">$1</span>');
document.getElementsByTagName('p')[0].innerHTML = str;

&lt;p&gt;&lt;/p&gt;

regex101 是 JavaScript RegEx 的首选

【讨论】：

【解决方案2】：

要替换 HTML 文档中的文本，最好遍历 DOM 树并在需要的地方替换文本节点的内容。

要仅匹配完整的单词（“bad”而不是“badly”），请将正则表达式与word boundary anchors \b 结合使用。

以下实现执行深度优先的 DOM 树遍历，并将包含单词“bad”的文本节点替换为该单词之前和之后的文本节点以及替换“bad”的<span style="color: red">bad</span>：

var walk = (node, func) => {
  var children = node.childNodes;
  for (var i = children.length - 1; i >= 0; --i) {
    walk(children[i], func);
  }
  func(node);
};

var highlight = (text, color) => {
  var span = document.createElement("span");
  span.style.color = color;
  span.appendChild(document.createTextNode(text));
  return span;
};

var root = document.getElementById("content");

walk(root, (node) => {
  if (node.nodeType != Node.TEXT_NODE) return;
  var texts = node.data.split(/\bbad\b/),
      length = texts.length;
  if (length > 1) {
    var fragment = texts.reduce((fragment, text, i) => {
      fragment.appendChild(document.createTextNode(text));
      if (i < length - 1) fragment.appendChild(highlight("bad", "red"));
      return fragment;
    }, document.createDocumentFragment());
    node.parentNode.replaceChild(fragment, node);            
  }
});

&lt;div id="content"&gt;are they good or bad, tell me how badly it is &lt;bad&gt;bad bad bad&lt;/bad&gt; if bad.&lt;/div&gt;

另见：JavaScript: Add elements in textNode

【讨论】：