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

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;">$1</span>');
另外，我:

• 添加了 i 修饰符，使其不区分大小写(捕获 Bad、BAD、bad)
  
• 封装(坏)在正则表达式中，以 $1 再次调用，这保持这种情况(如果大写为 Bad，则保持 Bad)

  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;

  <p></p>

regex101是 JavaScript RegEx 的首选位置