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>

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

原文地址：https://blog.csdn.net/qq_34458824/article/details/137641658

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！