如何使用原生JS为标题中孤立的字符v包裹<span>标签

问题原因 #

1. \b单词边界的匹配规则不符合需求：\b仅匹配\w（大小写字母、数字、下划线）和\W（非上述字符）的交界位置，无法精准限定字符v的前后必须是空格，因此会误命中单词内部符合边界规则的v字符。
2. 原有代码写法存在疏漏：正则无全局匹配标识，且replace中使用的\1没有对应正则捕获组，即便匹配正确也无法正常输出内容。

修复后代码 #

JavaScript 逻辑 #

(function() {
  const title = document.querySelector("h1>a");
  const originalContent = title.innerHTML;
  // 前后断言限定v的前后为空白字符，i标识不区分大小写，g标识全局匹配所有符合条件的字符
  const updatedContent = originalContent.replace(/(?<=\s)v(?=\s)/gi, '<span>$&</span>');
  title.innerHTML = updatedContent;
})();

CSS 样式（保持不变） #

span {
  text-transform: lowercase;
  color: black;
  background-color: red;
}

HTML 结构（保持不变） #

<h1>
  <a href="http://example.com/"> Viva v Vanuatu</a>
</h1>

兼容低版本浏览器方案 #

如果需要兼容不支持后行断言的旧版浏览器，可以使用分组匹配空格的方式实现相同效果：

(function() {
  const title = document.querySelector("h1>a");
  const originalContent = title.innerHTML;
  const updatedContent = originalContent.replace(/(\s)(v)(\s)/gi, '$1<span>$2</span>$3');
  title.innerHTML = updatedContent;
})();

运行后最终生成的DOM结构和需求完全一致：

<h1>
  <a href="http://example.com/"> Viva <span>v</span> Vanuatu</a>
</h1>

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