JS使用正则实现不区分字母大小写的高亮效果（不改变原文本的大小写）

阎魔あい

已于 2022-03-12 10:42:45 修改

阅读量3.6k

点赞数 5

CC 4.0 BY-SA版权

文章标签： javascript webview 前端正则表达式

于 2022-03-12 10:41:45 首次发布

本文链接：https://blog.csdn.net/weixin_44066951/article/details/123439542

这篇博客展示了如何使用JavaScript实现字符串中特定关键词的高亮显示。通过创建正则表达式并结合字符串的replace方法，实现了不区分大小写的关键词匹配，并用CSS样式红色显示。示例代码中，关键词'Ab'被替换为带红色样式的字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体高亮显示</title>
    <style>
        .red_t{
            color: #f00;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script>
        let dom = document.querySelector('#container');
        let str = '小写ab混合大小写aB大写AB';
        let strKeyWord = 'Ab'; //需要匹配的关键词
        //i代表忽略大小写，g代表全局匹配，不加g可以理解为str.replace('Ab')，加g为replaceAll('Ab')，此处'Ab'不区分大小写（正则不能放在replaceAll中）
        var oRegExp = new RegExp('('+strKeyWord+')',"ig");
        //$1代表正则中第一个小括号"()"本次的匹配结果,$2为第二个，以此类推；
        str = str.replace(oRegExp,`<font class="red_t">$1</font>`);
        dom.innerHTML = str;
        console.log(str);
    </script>
</body>

</html>

页面效果：

输出结果：