javascript - 使用javascript为单词添加样式

Question

<分区>

Answer 1

解决此问题的最佳方法可能是将要运行替换的内容包装在父 div 中。这样您就不必担心替换会影响内容 div 以外的任何内容。

此外，如果您不仅要替换第一个匹配项，还必须使用正则表达式 (/Amari/gi)，如下面的代码片段所示。 i 忽略大小写。

<div id="replace-content">
  Amari
</div>
<script>
  var amari = 'Amari';
  
  var replaceContent = document.getElementById('replace-content');
  var html = replaceContent.innerHTML.replace(/Amari/gi, '<span style="color:red">Amari</span>');
  replaceContent.innerHTML = html;
  
  console.log(amari);
</script>

编辑

如果您无法像 Rob 在他的评论中指出的那样修改标记，您可以选择从 DOM 查询中省略脚本标签。

    <div>
      Amari
    </div>
    <script>
      var amari = 'Amari';
      
      var elements = document.querySelectorAll('*:not(script)');
      
      for (var i = 0; i < elements.length; i++) {
        var html = elements[i].innerHTML.replace(/Amari/gi, '<span style="color:red">Amari</span>');
        elements[i].innerHTML = html;
      }
      console.log(amari);
    </script>