js实现模糊搜索下的文字高亮显示

news/2024/7/19 15:02:27 标签: js, 前端

因为项目需求写了一段模糊搜索文字高亮显示的功能,

效果如下:

话不多说,直接甩代码:

//this.searchValue 为搜索项 匹配搜索项与this.fileList[index].fullName是否匹配 然后
//返回匹配项数组searchMatchArr.涉及到了模糊搜索,故而做了大小写处理即函数searchSubStr
//this.positions用于存储检索到的需要高亮的下标

setSearchStyle() {
        if(this.searchValue.trim() !== '')
        {
          for(let i = 0; i < this.fileList.length; i++)
          {
            this.positions = [];
              //遍历获取符合要求的搜索项
              let re = new RegExp(this.searchValue,"ig");
              let searchMatchArr = [];
              searchMatchArr = this.fileList[i].fullName.match(re);
            if(this.fileList[i].fullName.match(re).length > 0)
            {
               //模糊搜索,不区分大小写
              this.searchSubStr(this.fileList[i].fullName, this.searchValue);
              let fullNameArr = this.fileList[i].fullName.split('');
              for(let m = 0; m < this.positions.length; m++)
              {
                //动态包裹标签设置class类
                fullNameArr.splice(this.positions[m], this.searchValue.length);
                fullNameArr.splice(this.positions[m], 0, '<span class="hignLight">' + searchMatchArr[m] + '</span>');
                this.fileList[i].fullName = fullNameArr.join('');
              }
            }
          }
        }
      }
//模糊搜索,不区分大小写
searchSubStr(str, subStr) {
      let pos = str.toLowerCase().indexOf(subStr.toLowerCase());
      while (pos > -1) {
        this.positions.push(pos);
        pos = str.toLowerCase().indexOf(subStr.toLowerCase(), pos + 1);
      }
    },


http://www.niftyadmin.cn/n/1143573.html

相关文章

电灯泡的题

TimeLimit:1000MS MemoryLimit:128MB 64-bit integer IO format:%lld Problem Description V_Dragon有n栈电灯泡&#xff0c;编号为1-n&#xff0c;每个灯泡都有一个开关。那么问题来了 所有灯泡初始时为不亮的 V_Dragon分别进行三次操作 每次操作他都选一个质数x&#x…

为什么死循环了

上述代码陷入死循环的原因&#xff1a; 内存空间氛围栈区&#xff0c;堆区&#xff0c;静态区&#xff1b; 其中栈区是存储局部变量&#xff1b; 原因&#xff1a; 1.栈区的默认使用&#xff1a; 先使用高地址处的空间&#xff1b; 再使用低地址处的空间 2.数组随着下边…

神奇的指针

具体内存布局如上 //两个指针相减代表两个指针之间的元素个数 //指针相减(地址1-地址2)/sizeof(类型) 这个你把他当成定律 &#xff0c;你要记牢。 //说白了还是指针类型加减整数跳跃的是一个类型 如 int *p;p1 意思就是 p跳跃一个整型 char *p; p1 意思就是 p跳…

指针的爱情

代码含义 char *a "asdsad"&#xff1b; 存入的是 字符串首元素地址 a是一个数组&#xff0c;数组中存放的类型的是char* 即指针数组 二级指针含义 pa是一个指针 *pa 指针指向 字符指针 char* *pa a 类比 int *p p是一个指针 *p 指针指向…

套娃的指针

c是一个数组&#xff0c; 存放内容是指针&#xff0c; 叫指针数组 cp是一个数组 存放内容是 指针的指针&#xff0c;叫二级指针数组 别废话&#xff0c;画个图就知道了 如上

大数运算之大数减法

蝈蝈的a-b&#xff08;middle&#xff09;TimeLimit:1000MS MemoryLimit:64MB64-bit integer IO format:%lld已解决 | 点击收藏Problem Description顾名思义&#xff0c;输入整数 a 和 b&#xff0c;输出 a - bInput输入一行两个整数 a 和 b&#xff08;1 ≤ lena&#xff0c;l…

7-3 时间换算 (15 分)

7-3 时间换算 (15 分) 本题要求编写程序&#xff0c;以hh:mm:ss的格式输出某给定时间再过n秒后的时间值&#xff08;超过23:59:59就从0点开始计时&#xff09;。 输入格式&#xff1a; 输入在第一行中以hh:mm:ss的格式给出起始时间&#xff0c;第二行给出整秒数n&#xff08…

7-14 复数四则运算 (15 分)

7-14 复数四则运算 (15 分) 本题要求编写程序&#xff0c;计算2个复数的和、差、积、商。 输入格式&#xff1a; 输入在一行中按照a1 b1 a2 b2的格式给出2个复数C1a1b1i和C2a2b2i的实部和虚部。题目保证C2不为0。 输出格式&#xff1a; 分别在4行中按照(a1b1i) 运算符 (a2…