如何用正则匹配非特定前缀数字并修改HTML对应数字颜色

首先，我们需要用负向后行断言精准匹配那些不跟在count后面的数字，同时要确保把替换后的内容重新赋值给pre元素的innerHTML才能让修改生效。完整代码如下：

const pre = document.getElementById('JSCode');
pre.innerHTML = pre.innerHTML.replace(/(?<!count)\d+/g, "<span style='color: #8be9fd'>$&</span>");

正则表达式详解 #

这里的核心是(?<!count)\d+：

• (?<!count)：这是负向后行断言，它会检查当前匹配的数字前面是否没有count这四个连续字符。如果数字前面是count，就会被排除，不会被匹配。
• \d+：匹配一个或多个数字（和你原来的[0-9]+作用一致，\d是数字的简写）。
• /g：全局匹配标志，确保所有符合条件的数字都会被处理。

为什么原来的代码不生效？ #

你原来的代码只调用了replace但没有把结果赋值回pre.innerHTML，所以修改不会体现在页面上。另外，原正则/[0-9]+/g会匹配所有数字，包括count1、count2里的1和2，不符合你的需求。

测试效果 #

针对你提供的HTML：

<pre id="JSCode" class="code">var count1=0; var count2=0;</pre>

运行代码后，最终渲染的内容会变成：
var count1=<span style='color: #8be9fd'>0</span>; var count2=<span style='color: #8be9fd'>0</span>;
也就是count1、count2里的数字保持原样，而赋值的0会变成指定的浅蓝色。

内容的提问来源于stack exchange，提问作者Harry