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

Question

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

 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>

Answer 1

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

添加了 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;"></span>');
document.getElementsByTagName('p')[0].innerHTML = str;

<p></p>

regex101 是 JavaScript RegEx

的首选之地

Answer 2

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

要仅匹配完整的单词（"bad" 但不匹配 "badly"），请将正则表达式与 word boundary anchors \b.

结合使用

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

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);            
  }
});

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

另请参阅：JavaScript: Add elements in textNode

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

Issue with replacing color of word occurrence

javascript

regex

str-replace