js匹配字符串中文字关键字高亮


 // 匹配颜色高亮
    function keywordscolorful(str, key){
        var reg = new RegExp("(" + key + ")", "g");
        var newstr = str.replace(reg, "<font style='background:#ff0;'>$1</font>");
        return newstr;
    }



 var a = keywordscolorful("123456", "2");

 

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,这里给出一个完整的例子,实现了输入不连续的字也可以查询到,并且关键字高亮显示的功能。希望能对你有所帮助。 HTML代码: ```html <div id="app"> <input type="text" v-model="keyword" placeholder="请输入关键字"> <ul> <li v-for="(item, index) in filteredList" :key="index" v-html="highlight(item)"> </li> </ul> </div> ``` Vue.js代码: ```javascript new Vue({ el: '#app', data() { return { keyword: '', list: [ '西安的天气很好', '北京的天气很冷', '上海的天气很热', '深圳的天气很湿' ] } }, computed: { // 根据关键字过滤数据 filteredList() { return this.list.filter(item => this.match(item)) } }, methods: { // 判断字符串是否匹配关键字 match(text) { if (!this.keyword) { return true } const kwd = this.keyword.split('') let i = 0 for (let j = 0; j < text.length && i < kwd.length; j++) { if (text[j] === kwd[i]) { i++ } } return i === kwd.length }, // 将匹配关键字高亮显示 highlight(text) { if (!this.keyword) { return text } const kwd = this.keyword.split('') let i = 0 let html = '' for (let j = 0; j < text.length && i < kwd.length; j++) { if (text[j] === kwd[i]) { html += `<span class="highlight">${text[j]}</span>` i++ } else { html += text[j] } } if (i < kwd.length) { return text } return html } } }) ``` CSS代码: ```css .highlight { color: red; font-weight: bold; } ``` 在这个例子,我们定义了一个match方法,用来判断字符串是否匹配关键字。这个方法,我们将关键字分割成一个个字母,然后遍历字符串的每个字符,如果字符与关键字的当前字母相同,就将关键字的下一个字母与字符串的下一个字符进行比较,直到关键字的所有字母都匹配成功,或者遍历完了字符串的所有字符。 在highlight方法,我们使用了和之前一样的正则表达式来将匹配关键字高亮显示。但是,由于现在的关键字不一定是连续的,所以我们需要手动遍历字符串的每个字符,判断是否匹配关键字,并将匹配的字符用span标签包裹起来。同时,我们还需要判断是否匹配成功,如果匹配成功就返回高亮后的字符串,否则返回原始字符串。 希望这个例子能够满足你的需求。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值