JS操作label标签移除%字符并修改文字颜色不生效问题排查

代码中的正则表达式存在逻辑错误：/%(.*?)/g 里的惰性匹配规则.*?没有设置匹配终止边界，默认会匹配%后0个长度的字符，最终替换时只会把%替换成空内容的span标签，根本没有捕获到%后面的实际单词，绿色样式无法挂载到目标文字上，自然不会生效。

将正则调整为/%(\w+)/g，该规则会精准捕获%符号后紧跟的连续英文单词内容，替换时把捕获到的内容放入带绿色样式的span标签内即可。

适配扩展：如果需要匹配%后包含特殊符号、中文等非英文单词的内容，可以把正则替换为/%(\S+)/g，即捕获%后到下一个空白字符前的所有内容，覆盖更多使用场景。

JS 逻辑 #

var text = "Lite %match Color"
text = text.replace(/%(\w+)/g, "<span style='color: green'>$1</span>")
document.getElementById("output").innerHTML = text

HTML 结构 #

<label id="output"></label>

代码执行后，Lite 和 Color显示为默认黑色文字，中间的match显示为绿色，%前缀被正常移除，完全符合预期效果。

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