JS全局匹配字符串,不区分大小写

最近被一个小的功能搞得的是焦头烂额。也可能是自己水平没有达到。通过百度和分析现在基本是弄出来了。

废话不多说,先看需求:

要求根据在输入框中输入关键词,查询到数据中有关键词的部分进行高亮,要求查找的关键词全部能匹配高亮,并在查找的英文中不区分大小写全部匹配,多个关键词查找之前用空格隔开

代码如下(这里只有一部分代码,但关键词和查找的数据这些提前的自己准备好)

// 这里只是判断输入的关键词是否存在

// 这里的resultslist是要查询的列表

resultsList.map((item, index) => {

if (this.searchContent && this.searchContent.length > 0) {

    // 这里将多个关键词按逗号拼接都在拆分,主要用于多个关键词的匹配
    this.searchContent.split(',').forEach(function(a) {
         // resultsList[index].isDescribe = true

               // 这里主要是判断查找的关键词若首位带*号时进进行转义。主要是后面用正则匹配有关系(若不转义用正则匹配会报错)
                if (!a.indexOf('*')) {
                       a = '\\' + a;
                 }

                // 这部分和上面一样

                 if (a.substr(a.length - 1, 1) == '*') {
                        a = a.substring(0, a.length - 1) + '\\*';
                  }

                  // 保存旧标题
                  let oldHtml = item.title;
                  // 要查询的字符串
                  // let inpVal = a;
                  // 获取新标题
                  let texts = oldHtml;
                  // 获取要查询的正则(全局匹配不区分大小写)
                  let allVal = oldHtml.match(new RegExp(a, 'ig'));
                  // 当正则匹配的字符串存在时
                  if (allVal) {
                       for (var j = 0; j < allVal.length; j++) {
                             texts = texts.replace(allVal[j], '[*' + j + '*]');
                       }
                       for (var i = 0; i < allVal.length; i++) {
                             texts = texts.replace('[*' + i + '*]', '<span style="color: #FFB148">' + allVal[i] + '</span>');
                       }

                   }

                    resultsList[index].title = texts;

                    // 下面一部分不用看了和上面的内用一样,主要我的项目需要

                    // 保存旧内容
                    let oldHtmls = item.summary;
                    // 要查询的字符串
                    // let inpVals = a;
                    // 获取新标题
                    let textss = oldHtmls;
                    // 获取要查询的正则
                    let allVals = oldHtmls.match(new RegExp(a, 'ig'));
                    // 当正则匹配的字符串存在时
                     if (allVals) {
                            for (var k = 0; k < allVals.length; k++) {
                                  textss = textss.replace(allVals[k], '[*' + k + '*]');
                            }
                            for (var l = 0; l < allVals.length; l++) {
                                  textss = textss.replace('[*' + l + '*]', '<span style="color: #FFB148">' + allVals[l] + '</span>');
                            }

                      }

                    resultsList[index].summary = textss;                                         
      })

}

}

以上就是全文检索英文不区分大小写匹配关键词高亮的效果。可能代码有些冗余。写的不好的地方请大神指点。以此记录在这个路上走过的坑。

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值