使用正则表达式在HTML元素中定位并高亮特定字符及其前一个字符-js教程-PHP中文网

使用正则表达式在HTML元素中定位并高亮特定字符及其前一个字符

聖光之護

发布： 2025-11-23 20:35:01

原创

352人浏览过

使用正则表达式在html元素中定位并高亮特定字符及其前一个字符

本文将详细介绍如何利用JavaScript和正则表达式，在HTML元素中精准定位特定字符（如撇号）及其前一个字符，并将其用标签包裹以实现高亮效果。文章将探讨两种主要的正则表达式模式：正向先行断言与正向后行断言结合，以及使用捕获组的方式，并提供相应的代码示例，帮助开发者灵活处理文本内容的高亮需求。

在网页开发中，对HTML元素内的特定文本模式进行查找和样式应用是一项常见需求。例如，我们可能需要将一个撇号（'）及其紧邻的前一个字母用标签包裹起来，以改变它们的颜色或其他样式，如将Can't转换为Can't。传统的字符串查找替换方法可能难以实现这种复杂的模式匹配，而正则表达式则提供了强大而灵活的解决方案。

理解核心需求与挑战

我们的核心目标是识别一个字母后紧跟一个撇号的模式，然后将这个字母和撇号一起包裹在标签中。最初的尝试可能只会包裹撇号本身，例如使用 html.replace(/(')/g, '$1')。然而，要同时选中并包裹撇号前面的字符，就需要更高级的正则表达式技巧。下面我们将介绍两种主要的正则表达式实现方式，它们在处理此类问题时各有侧重。

方法一：利用正向先行断言与正向后行断言（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属性转义序列生效。

这个模式只会匹配“被两个字母包围的撇号”本身。在替换时，我们可以使用 $&，其中 $& 代表整个匹配到的字符串（即撇号）。

示例代码（仅包裹被字母包围的撇号）

以下示例演示了如何在<h1>标签中，仅将满足前后均为字母条件的撇号用包裹：

document.querySelectorAll('h1').forEach(elmNode => {
    // 使用正向先行断言和正向后行断言，只匹配撇号本身
    elmNode.innerHTML = elmNode.innerHTML.replace(
        /(?<=\p{L})'(?=\p{L})/gu,
        '<span>$&</span>' // $& 代表匹配到的撇号
    );
});

登录后复制

适用场景与局限

此方法适用于当你只想包裹特定字符本身，但需要其前后存在特定模式作为约束条件时。然而，如果目标是同时包裹撇号和它前面的字符，此方法就显得不够直接。

方法二：利用捕获组（Capturing Groups）

捕获组允许我们将正则表达式中匹配到的部分提取出来，并在替换函数中使用这些捕获到的内容。这是实现“包裹撇号及其前一个字符”需求的理想且更直接的方法。

有道智云AI开放平台

116

查看详情

模式解析

考虑正则表达式 /(\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（撇号前的字母）和撇号一起放入 中，而 after（撇号后的字母）则保持不变，从而实现了 Can't 的效果。

示例代码（包裹撇号及其前一个字符）

以下示例演示了如何在标签中，将撇号及其前一个字母一起用包裹：

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>

登录后复制