JS中字符串中带有括号,正则不能识别的解决办法

需求:将字符串中带有下列关键词的字段全部高亮显示

var str = "阿里巴巴(中国)网络技术有限公司深圳办事处";//字符串

var keyword = "阿里巴巴(中国)网络技术有限公司";//关键词

var reg =keyword .replace(/\(/g,"\\(").replace(/\)/g,"\\)");//针对搜索关键词中有括号的情况,先将括号转换成正则能识别的字符串

str = str .replace(new RegExp(reg,'g'),'<i class="txtred">'+keyword+'</i>');//将字符串中包括的关键词高亮显示

 

好的,下面是一个简单的vue模糊查询列表数据的例子,包括输入不连续的字也可以查询到对应的字符串和关键字高亮的功能。在这个例子,我们使用了一个自定义指令来实现关键字高亮的效果。 HTML代码: ```html <div id="app"> <input v-model="keyword" placeholder="输入关键词"> <ul> <li v-for="item in filteredItems" v-html="item"></li> </ul> </div> ``` JavaScript代码: ```javascript Vue.directive('highlight', { // 当绑定元素插入到 DOM 。 inserted: function (el, binding) { let keyword = binding.value let reg = new RegExp(keyword, 'ig') let html = el.innerHTML el.innerHTML = html.replace(reg, `<span class="highlight">${keyword}</span>`) } }) new Vue({ el: '#app', data: { keyword: '', items: ['apple', 'banana', 'orange', 'watermelon'] }, computed: { filteredItems: function () { let keyword = this.keyword.trim().replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&') let reg = new RegExp(keyword.split('').join('.*?'), 'ig') return this.items.filter(item => reg.test(item)).map(item => item.replace(reg, `<span class="highlight">${keyword}</span>`)) } } }) ``` CSS代码: ```css .highlight { color: red; font-weight: bold; } ``` 在这个例子,我们通过使用computed属性来实现模糊查询功能,使用自定义指令来实现关键字高亮的效果。其,computed属性的过滤逻辑是通过正则表达式来实现的,可以实现输入不连续的字也可以查询到对应的字符串的功能。同,我们还对用户输入的关键词进行了一定的处理,去除了开头和结尾的空格,并且在正则表达式对特殊字符进行了转义,以避免出现意外的错误。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值