本教程将详细介绍如何利用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()方法与一个函数结合使用时，该函数会接收以下参数：

• 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) => `${ before }'${ after }`
);
// 结果将是 "Can'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,
  '$&'
);
// 结果将是 "Can't"

注意： 这种方法只包装了撇号本身，不包括其前置字符。它适用于只需要突出显示撇号，且撇号必须被字母包围的场景。

综合示例与实践

下面是一个完整的HTML、CSS和JavaScript示例，演示了如何在实际项目中应用上述两种正则表达式策略。

HTML结构 (index.html):

    
    
    
    


    
Can't
    
don't I'm
    
doesn't
'enclosed by single quotes'

    
Can't
    
don't I'm
    
doesn't
'enclosed by single quotes'

    

**CSS样式 (`style.