Question

我正在尝试使用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>');

非常感谢你。

Answer 1

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

此外，如果您想要替换的不仅仅是第一场比赛，您还必须使用正则表达式文字（/ Amari / gi），如下面的代码段所示。我无视案例。

＆＃13;

<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>

＆＃13;

修改

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

＆＃13;
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

你也有语法错误。因为你没有在报价单中包装你的风格。

但是，最好使用正则表达式。

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

Answer 3

您需要使用正则表达式，因为您不希望替换匹配脚本标记内的字符串，这会使它更复杂。

但是，您可以使用名为lookaround

的正则表达式技术来实现此目的像这样的正则表达式可以解决这个问题：

bby

这里有您的代码：

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

TBH我不建议在原始HTML上使用正则表达式

使用javascript添加样式一个单词

3 个答案: