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