本教程将详细介绍如何利用javascript正则表达式，在html元素中查找并包装特定的字符（如撇号）及其紧邻的前置字符。文章将深入探讨两种核心正则匹配策略：利用捕获组实现精确的组合包装，以及使用先行/后行断言仅包装目标字符本身。通过实际代码示例，帮助开发者灵活应对不同场景下的文本高亮需求。
在前端开发中，我们经常需要对页面上的特定文本内容进行高亮或样式处理。一个常见的需求是，不仅要定位到某个特殊字符，还要将其前一个字符与它一同包装起来，例如将Can't中的n'包装成n'。本文将基于JavaScript的字符串replace()方法和正则表达式，提供两种高效且灵活的解决方案。
核心概念：正则表达式在字符串替换中的应用
JavaScript的String.prototype.replace()方法结合正则表达式是实现文本模式匹配和替换的强大工具。通过定义合适的正则表达式模式，我们可以精确地定位到目标文本，并使用自定义的替换逻辑来修改字符串。当替换逻辑复杂时，可以使用一个函数作为replace()方法的第二个参数，该函数会接收匹配到的内容和所有捕获组的值，从而提供更大的灵活性。
方法一：使用捕获组实现精确包装
要实现将目标字符及其前一个字符一同包装的需求，捕获组（Capturing Groups）是理想的选择。捕获组允许我们将正则表达式中匹配到的部分提取出来，并在替换函数中进行引用。
1. 正则表达式模式解析：/(\p{L})'(\p{L})/gu
- (\p{L}): 这是一个捕获组。\p{L}是一个Unicode属性转义序列，它匹配任何Unicode字母字符。这个捕获组将捕获撇号前的任意字母。
- ': 直接匹配一个撇号字符。
- (\p{L}): 这是第二个捕获组，同样匹配任何Unicode字母字符，它将捕获撇号后的任意字母。
- g 标志：全局匹配，查找所有符合模式的子串，而不是在找到第一个后停止。
- u 标志：启用Unicode支持，使得\p{L}等Unicode属性转义序列能够正确工作。
2. 替换函数：(match, before, after) =>${ before }'${ after }``
当replace()方法与一个函数结合使用时，该函数会接收以下参数：
立即学习“Java免费学习笔记（深入）”；
- match: 整个匹配到的字符串（例如n't）。
- before: 第一个捕获组匹配到的内容（例如n）。
- after: 第二个捕获组匹配到的内容（例如t）。 通过这个函数，我们可以构建新的字符串。在我们的例子中，${ before }'${ after }表示将捕获到的前置字母和撇号一起放入标签中，而撇号后的字母则保持原样。
示例代码（仅展示核心替换逻辑）：
// 假设 elmNode.innerHTML 为 "Can't"
elmNode.innerHTML = elmNode.innerHTML.replace(
/(\p{L})'(\p{L})/gu,
(match, before, after) => `<span>${ before }'</span>${ after }`
);
// 结果将是 "Ca<span>n'</span>t"方法二：利用先行断言和后行断言（Lookarounds）
如果需求仅仅是包装撇号本身，并且这个撇号必须位于两个字母之间，那么先行断言（Lookahead）和后行断言（Lookbehind）提供了一种更简洁的匹配方式。它们允许我们匹配一个模式，但只在特定条件（不包含在匹配结果中）满足时才进行匹配。
1. 正则表达式模式解析：/(?
- (?
- ': 匹配一个撇号字符。
- (?=\p{L}): 这是一个正向先行断言。它要求当前位置的后面必须是一个Unicode字母字符，但这个字母本身也不会被包含在匹配结果中。
- g 和 u 标志同上。
2. 替换字符串：'$&'
由于先行断言和后行断言不“消费”字符（即它们不成为匹配结果的一部分），整个正则表达式/(?
示例代码（仅展示核心替换逻辑）：
// 假设 elmNode.innerHTML 为 "Can't"
elmNode.innerHTML = elmNode.innerHTML.replace(
/(?<=\p{L})'(?=\p{L})/gu,
'<span>$&</span>'
);
// 结果将是 "Can<span>'</span>t"注意： 这种方法只包装了撇号本身，不包括其前置字符。它适用于只需要突出显示撇号，且撇号必须被字母包围的场景。
综合示例与实践
下面是一个完整的HTML、CSS和JavaScript示例，演示了如何在实际项目中应用上述两种正则表达式策略。
HTML结构 (index.html):
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>精确包装字符教程</title>
<link rel="stylesheet" href="style.css">
</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 src="script.js"></script>
</body>
</html>**CSS样式 (`style.
