因为项目需求写了一段模糊搜索文字高亮显示的功能,
效果如下:
话不多说,直接甩代码:
//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);
}
},