本文将详细介绍如何利用JavaScript和正则表达式，在HTML元素中精准定位特定字符（如撇号）及其前一个字符，并将其用标签包裹以实现高亮效果。文章将探讨两种主要的正则表达式模式：正向先行断言与正向后行断言结合，以及使用捕获组的方式，并提供相应的代码示例，帮助开发者灵活处理文本内容的高亮需求。
在网页开发中，对HTML元素内的特定文本模式进行查找和样式应用是一项常见需求。例如，我们可能需要将一个撇号（'）及其紧邻的前一个字母用标签包裹起来，以改变它们的颜色或其他样式，如将Can't转换为Can't。传统的字符串查找替换方法可能难以实现这种复杂的模式匹配，而正则表达式则提供了强大而灵活的解决方案。
理解核心需求与挑战
我们的核心目标是识别一个字母后紧跟一个撇号的模式，然后将这个字母和撇号一起包裹在标签中。最初的尝试可能只会包裹撇号本身，例如使用 html.replace(/(')/g, '$1')。然而，要同时选中并包裹撇号前面的字符，就需要更高级的正则表达式技巧。下面我们将介绍两种主要的正则表达式实现方式，它们在处理此类问题时各有侧重。
方法一：利用正向先行断言与正向后行断言（Lookarounds）
正向先行断言（Positive Lookahead (?=...)）和正向后行断言（Positive Lookbehind (?
立即学习“前端免费学习笔记（深入）”；
模式解析
考虑正则表达式 /(?
- \p{L}：这是一个Unicode属性转义序列，表示任何Unicode字母字符。u 标志（Unicode）是必需的，以确保它能正确匹配各种语言的字母。
- (?
- '：匹配撇号本身。
- (?=\p{L})：正向先行断言，它确保匹配的撇号后面有一个字母。这个字母同样是条件，不被包含在匹配结果中。
- g 标志：全局匹配，查找所有符合模式的匹配项。
- u 标志：启用Unicode模式，使 \p{L} 等Unicode属性转义序列生效。
这个模式只会匹配“被两个字母包围的撇号”本身。在替换时，我们可以使用 $&，其中 $& 代表整个匹配到的字符串（即撇号）。
示例代码（仅包裹被字母包围的撇号）
以下示例演示了如何在
标签中，仅将满足前后均为字母条件的撇号用包裹：document.querySelectorAll('h1').forEach(elmNode => {
// 使用正向先行断言和正向后行断言，只匹配撇号本身
elmNode.innerHTML = elmNode.innerHTML.replace(
/(?<=\p{L})'(?=\p{L})/gu,
'$&' // $& 代表匹配到的撇号
);
});适用场景与局限
此方法适用于当你只想包裹特定字符本身，但需要其前后存在特定模式作为约束条件时。然而，如果目标是同时包裹撇号和它前面的字符，此方法就显得不够直接。
方法二：利用捕获组（Capturing Groups）
捕获组允许我们将正则表达式中匹配到的部分提取出来，并在替换函数中使用这些捕获到的内容。这是实现“包裹撇号及其前一个字符”需求的理想且更直接的方法。
模式解析
考虑正则表达式 /(\p{L})'(\p{L})/gu：
- (\p{L})：第一个捕获组，匹配并捕获撇号前面的任何Unicode字母。
- '：匹配撇号本身。
- (\p{L})：第二个捕获组，匹配并捕获撇号后面的任何Unicode字母。
- g 和 u 标志同上。
这个模式会匹配一个字母、一个撇号、再一个字母的完整序列，并将前后两个字母分别捕获。
替换函数的使用
当 String.prototype.replace() 方法的第二个参数是一个函数时，这个函数会接收多个参数：
- 第一个参数是整个匹配到的字符串（例如 n't）。
- 接下来的参数是各个捕获组匹配到的内容（按顺序，例如 n 和 t）。
- 最后还有匹配的偏移量和原始字符串。
对于我们的模式 /(\p{L})'(\p{L})/gu，替换函数可以这样定义，以实现包裹撇号及其前一个字符的需求：
(match, before, after) => `${ before }'${ after }`
- match：整个匹配到的字符串，如 "n't"。
- before：第一个捕获组的内容，即撇号前的字母，如 "n"。
- after：第二个捕获组的内容，即撇号后的字母，如 "t"。
通过这种方式，我们可以在替换字符串中精确地控制哪些部分被包裹。在这里，我们将 before（撇号前的字母）和撇号一起放入 中，而 after（撇号后的字母）则保持不变，从而实现了 Can't 的效果。
示例代码（包裹撇号及其前一个字符）
以下示例演示了如何在
标签中，将撇号及其前一个字母一起用包裹：
document.querySelectorAll('p').forEach(elmNode => {
// 使用捕获组，包裹撇号及其前一个字母
elmNode.innerHTML = elmNode.innerHTML.replace(
/(\p{L})'(\p{L})/gu,
(match, before, after) => `${ before }'${ after }`
);
});样式定义
为了让包裹后的文本显示出高亮效果，我们需要定义相应的CSS样式：
/* 基础样式 */
h1, p {
font-size: 1.2em;
margin: 0;
padding: 0 3px;
}
/* H1中仅高亮撇号的样式 */
h1 span {
color: red;
}
/* P中高亮撇号及其前一个字符的样式 */
p span {
color: orange;
font-weight: bolder;
}完整示例
以下是一个包含HTML结构、CSS样式和JavaScript逻辑的完整示例，展示了两种方法的应用：
使用正则表达式高亮特定字符
Can't
don't I'm
doesn't
'enclosed by single quotes'
Can't
don't I'm
doesn't
'enclosed by single quotes'
总结与注意事项
- 选择合适的正则表达式模式：
Can't
don't I'm
doesn't
'enclosed by single quotes'
Can't
don't I'm
doesn't
'enclosed by single quotes'
