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

已于 2022-03-12 10:42:45 修改
阅读量3k 收藏 11
点赞数 3
文章标签： javascript webview 前端 正则表达式
于 2022-03-12 10:41:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44066951/article/details/123439542
版权

直接上代码

<!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>

页面效果：

输出结果：

 

阎魔あい
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
asp 关键词高亮显示(不区分大小写)
01-20
在这种配置下我们要实现关键词不区分大小写搜索并高亮显示要借助ASP的正则处理了，请看下面代码： 代码如下:<% Function Takeout(patrn,string1,colors) ‘提取搜索关键字匹配文字 Dim regEx, Match, Matches, tt ‘ 建立变量。 Set regEx = New RegExp ‘ 建立正则表达式。 regEx.Pattern = patrn ‘ 设置模式。 regEx.IgnoreCase = True ‘ 设置是否区分大小写。 regEx.Global = True ‘ 设置全局可用性。 Set Matches = regEx.Ex
js正则表达式
zhenxiang_xue
03-18 225
正则表达式（英语：Regular Expression）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。 1、正则表达式的定义： 显示声明： new RegExp(“正则表达式主体”, 修饰符（可选）)，例 new RegExp(“a”, g) 隐式声明：/正则表达式主体/修饰符（可选），例 /a/g 2、正则表达式的修饰符： i：忽略大小写（ignore）将匹配设置为不区分大小写，搜索时不区分大小写: A 和 a 没有区别。 m：多行匹配（multi line）使边界字符 ^ 和 $ 匹
转化大小写，首字母大写
dxj124的博客
05-13 583
比如：先把要比较的字符串统一一下大小写，然后在进行比较，这样是不是就省事多了，在js中有两个这样的方法： toUpperCase()：把字符串转换为大写； toLowerCase() ：把字符串转换为小写。 用法如下： str.toUpperCase()：将字符串str中的字符都转换为大写。 str.toLowerCase()：将字符串str中的字符都转换为小写。 首字母大写...
js正则匹配中文、大小写字母、数字、下划线
东东不邪的专栏
10-15 2834
function validate(value) { value = value.replace(/^\s+|\s+$/g,""); //允许中文、大小写字母、数字、下划线以及[]，长度2到20位 var reg = new RegExp("^[A-Za-z0-9\\[\\]_\u4e00-\u9fa5]+$"); return reg.test(value); //匹配返回true，否则false } 注意：其中[]需要加转译符\\，单\无效。 ...
正则表达式学习笔记：（5）js的正则表达式
yl640007010的博客
03-06 258
语法 /正则表达式主体/修饰符(可选) 实例： var patt = /runoob/i 实例解析： /runoob/i 是一个正则表达式。 runoob 是一个正则表达式主体(用于检索)。 i 是一个修饰符(搜索不区分大小写)。 方法 http://www.runoob.com/jsref/jsref-obj-regexp.html search() 方法...
JavaScript正则表达式
weixin_45203607的博客
10-07 704
JavaScript正则表达式 介绍 定义正则表达式的 两种方法 第一种普通方式 第二种构造函数方式 var c= / 表达式/附加参数 注意 切记 不要 用引号 把 表达式 括起来 否则 失效 var c=new RegExp(“表达式”,”附加参数”) 附加参数(可以省略)附加参数: g 全局匹配 i不区分大小写 m进行多行匹配 正则表达式符号 符号 描述 / 表达式内容 / 代表开始和结束 ^ 匹配字符串的开始 $ 匹配字符串的结束 \s 任何空白字符
js 不区分大小写比较字符串
chen_hongwei的博客
11-21 2万+
js是一种区分大小写的语言，但是我们在使用模糊匹配的时候，又不能确定被匹配内容的大小写； 那么我们可以转换思路，把输入项与被匹配项全部转化成统一格式： js转化大小写方法：  toUpperCase()：把字符串转换为大写；  toLowerCase() ：把字符串转换为小写。    //从数组中匹配字符串是否存在，不区分大小写 var arr = ['Tom', '你好', 'BOB']...
JS 正则表达式（正则匹配RegExp）
XSL_HR的博客
04-17 3931
一篇文章带你学会JS正则匹配
js正则校验不分大小写，与8-20位字符，包含大小写字母，数字字符密码
ndkfa的博客
05-17 736
【代码】js正则不区分大小写搜索。
js 正则表达式 - 忽略英文大小写
Komorebi的博客
03-15 551
正则表达式忽略大小写
功能强大的正则测试工具-Windows版本
02-09
windows 版本 正则表达式测试工具。支持正则测试、正则替换测试。 正则结果高亮。匹配结果分组显示，结果更清晰。提供不区分大小写、单行搜索、多行搜索、从右到左搜索 复选框，一键切换。
将多个字符串高亮显示之TTTAttributedLabel
01-20
下面通过代码图和效果图展示给大家 TTTAttributedLabel进行多个...传入字符串text，和需要高亮的字串patterns ， 正则表达式就是字串的 “|” 集合, 根据正则表达式进行字串的大小写不敏感匹配， 然后枚举生成的NSText
MT管理器是一款强大的文件管理工具和APK逆向修改 如果你喜欢它的双窗口操作风格，可以单纯地把它当成文件管理器使用
03-09
- 自带强大的文本编辑器，可以流畅编辑大文本文件，支持设置是否显示行号、开关自动换行、双指缩放字体大小、自动识别编码、代码语法高亮、自动缩进、正则搜索替换。 - 拥有图片查看、音乐播放、字体预览、执行脚本...
史上最强JavaScript日历控件正式版(无偿的永久的提供给大家免费使用，含全部源代码)
02-21
自定义格式(注意大小写) yMdHmswW分别代表年月日时分秒星期周,你可以任意组合这些元素来自定义你个性化的日期格式. 如:"yyyy年M月d日 HH时mm分" 返回:"2008年3月12日 19时20分" 编辑功能 不知道您是否已经注意到,当...
前端实现模糊查询不区分大小写
weixin_43196880的博客
10-12 1984
js使用es6实现模糊搜索（不区分大小写）
JavaScript 正则表达式
fagdg的博客
05-10 1033
一、正则表达式 正则表达式(Regular Expression)是一种文本模式，包括普通字符（例如，a 到 z 之间的字母）和特殊字符（称为"元字符"）。 正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。 1、创建正则对象 构造函数：var reg= new RegExp("正则表达式","修饰符“); 字面量:var reg=/正则表达式/修饰符 2、修饰符 ...
常用正则表达式(?i)忽略字母的大小写！
热门推荐
iwanttoknow7的专栏
07-29 6万+
1。^/d+$　　//匹配非负整数（正整数 + 0） 2。^[0-9]*[1-9][0-9]*$　　//匹配正整数 3。^((-/d+)|(0+))$　　//匹配非正整数（负整数 + 0） 4。^-[0-9]*[1-9][0-9]*$　　//匹配负整数 5。^-?/d+$　　　　//匹配整数 6。^/d+(/./d+)?$　　//匹配非负浮点数（正浮点数 + 0） 7。^(([0-9]+/.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*/.[0-9]+)|([0-9]*[1-9]
JS全局匹配字符串,不区分大小写
weixin_38710804的博客
11-27 6785
最近被一个小的功能搞得的是焦头烂额。也可能是自己水平没有达到。通过百度和分析现在基本是弄出来了。 废话不多说，先看需求： 要求根据在输入框中输入关键词,查询到数据中有关键词的部分进行高亮,要求查找的关键词全部能匹配高亮,并在查找的英文中不区分大小写全部匹配,多个关键词查找之前用空格隔开 代码如下(这里只有一部分代码，但关键词和查找的数据这些提前的自己准备好) // 这里只是判断输入的关键词...
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 368
注释很详细，直接上代码……
javascript 全局替换大小写
08-31
在JavaScript中，要实现全局替换大小写，你可以使用正则表达式和`replace()`方法。你可以使用正则表达式的`/g`标志来表示全局匹配，然后使用`i`标志来表示不区分大小写。下面是一个示例代码： ``` let str = "complete Comlete successful Successful error Error Failed failed"; let result = str.replace(/complete/gi, "replaced"); console.log(result); ``` 这段代码将会把字符串中所有的"complete"（不区分大小写）替换为"replaced"。因此，最终输出的结果将会是："replaced Comlete successful Successful error Error Failed failed"。 注意，在上述代码中，我们使用了正则表达式`/complete/gi`来匹配所有的"complete"，并且使用`replace()`方法将其替换为"replaced"。其中，`/g`表示全局匹配，`i`表示不区分大小写。 希望这个解答对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript之全局函数详解](https://blog.csdn.net/weixin_45735355/article/details/119953872)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [用JavaScript实现全局替换，解决$等特殊符号的难题](https://download.csdn.net/download/weixin_38516706/13617459)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [vue replace()实现关键词高亮(多组关键词)全局匹配不区分大小写](https://blog.csdn.net/weixin_43085245/article/details/125516023)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值