如何在存在撇号时为单引号间的文本添加颜色？

两个问题的原因 #

1. 单引号消失+标签错误：你的替换字符串没保留原单引号，而且<span>标签未闭合（少了>），导致结构错误。
2. 误匹配所有格：当前正则/'([^']*)'/g会匹配所有成对单引号，包括It's、Bob's这类所有格的单引号。

修正后的代码 #

<div id="chapter">It's Bob's house. 'division' needs style.</div>

const chapter = document.querySelector('#chapter');
chapter.innerHTML = chapter.innerHTML
  // 匹配非所有格的单引号对，保留单引号并给内部内容添加红色样式
  .replace(/(?<!\w)'([^']*)'(?!\w)/g, "'<span style='color:red'>$1</span>'");

正则说明 #

• (?<!\w)：负向回顾断言，确保单引号前不是字母/数字，排除It's这类所有格的左单引号。
• '([^']*)'：捕获单引号包裹的内容。
• (?!\w)：负向前瞻断言，确保单引号后不是字母/数字，排除Bob's这类所有格的右单引号。

这样调整后，只有独立引用的单引号内容（比如'division'）会被添加红色样式，所有格的单引号不会被误处理，同时保留了原单引号，标签也正确闭合。

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