使用javascript为单词添加样式

adding styles a word using javascript

本文关键字：添加 样式 单词 javascript 使用      更新时间：2023-09-26

我试图使用JavaScript替换Word，但当脚本运行时，也会替换JavaScript中的Word。这个想法是当脚本在文档上找到Word时，添加一些样式的Word，然后我使用REPLACE来执行此操作，查看代码

document.body.innerHTML = document.body.innerHTML.replace('Amaru', '<span style=font-family:"Inder"!important;color:#0c5d4e;text-transform:lowercase;>amaru</span>');

非常感谢你。

实现这一点的最佳方法可能是将要运行替换的内容包装在父div中。这样，您就不必担心替换会影响除内容div中的内容之外的任何内容。

此外，如果您想替换的不仅仅是第一个匹配项，则必须使用regex文本（/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>

您也有语法错误。因为你没有把你的风格写在报价里。

不过，最好使用Regex。

document.body.innerHTML = document.body.innerHTML.replace(/Amaru/g, '<span style=''font-family:"Inder"!important;color:#0c5d4e;text-transform:lowercase;''>amaru</span>');
Amaru 1
<br>
Amaru 2

您将需要使用正则表达式，因为您不希望替换与脚本标记中的字符串相匹配，这会使它稍微复杂一些。

然而，您可以使用一种名为环视的正则表达式技术来实现这一点

像这样的正则表达式应该可以做到这一点：

(?!<script[^>]*?>)('bAmaru'b)(?![^<]*?<'/script>)

这里有你的代码：

var regex = /(?!<script[^>]*?>)('bAmaru'b)(?![^<]*?<'/script>)/;
document.body.innerHTML = document.body.innerHTML.replace(regex, '<span style=font-family:"Inder"!important;color:#0c5d4e;text-transform:lowercase;>amaru</span>');

TBH我真的不建议在原始HTML上使用regex

相关文章：