最近被一个小的功能搞得的是焦头烂额。也可能是自己水平没有达到。通过百度和分析现在基本是弄出来了。
废话不多说,先看需求:
要求根据在输入框中输入关键词,查询到数据中有关键词的部分进行高亮,要求查找的关键词全部能匹配高亮,并在查找的英文中不区分大小写全部匹配,多个关键词查找之前用空格隔开
代码如下(这里只有一部分代码,但关键词和查找的数据这些提前的自己准备好)
// 这里只是判断输入的关键词是否存在
// 这里的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;
})
}
}
以上就是全文检索英文不区分大小写匹配关键词高亮的效果。可能代码有些冗余。写的不好的地方请大神指点。以此记录在这个路上走过的坑。