JS搜索关键字匹配变色

使用场景:用户通过搜索关健字(keyword),对文本进行匹配,并对匹配到的文本进行一些高亮处理

解析:使用的是JavaScript中的 RegExp(正则表达式)对象,var regExp = new RegExp(keyword,'g');

// keyword:是关键字, 
g:执行全局匹配,如果不输入的话将会查一条,
i:执行大小写不敏感匹配,
m:执行多行匹配

详细代码:

1、使用原始的匹配项(match)来保持大小写。也就是说,关键字会匹配到文本的内容,同时文本的内容是不更改的

         brightenKeyword(val, keyword) {
                const Reg = new RegExp(keyword, 'gi');
                if (val) {
                    const res = val.replace(Reg, (match) => {
 // 使用原始的匹配项(match)来保持大小写
                        return `<span style="color: #0D77E2;">${match}</span>`;
                    });
                    return res;
                }
            },

2、不保持匹配文本的大小写。也就是说文本内容是需要更改的。

            brightenKeyword(val, keyword) {
                const Reg = new RegExp(keyword, 'gi');
                if (val) {
                   const res = val.replace(Reg, <span style="color: #0D77E2;">${keyword}</span>);
                    return res;
                }
            },

html调用:(示例只以vue为主,原生JS的话调用方法即可):

<text class="sList-info-title text-ellipsis" v-html="brightenKeyword('被匹配的文本',keyword)"></text>

好了,以上就可以获得简单的高亮处理了。

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值