TP：以下两种方法多次匹配也不会造成匹配结果混乱的问题
- 第一种方法
javascript
let keyword = ["red", "color", ">"];
let tableData = {
MatchCompanyName: "color fjkfffs red >",
};
// 关键词高亮函数
function highlightKeywords(data, keywords) {
let matchCompanyName = data.MatchCompanyName;
let result = '';
let lastIndex = 0;
// 构建一个正则表达式，将所有关键词合并到一个表达式中
const regex = new RegExp(keywords.join('|'), 'gi');
// 遍历所有的匹配项
matchCompanyName.replace(regex, (match, index) => {
// 拼接匹配前的部分
result += matchCompanyName.slice(lastIndex, index);
// 拼接高亮的部分
result += `<span class="highlighted">${match}</span>`;
// 更新最后一个匹配结束的索引
lastIndex = index + match.length;
});
// 拼接剩余的部分
result += matchCompanyName.slice(lastIndex);
return result;
}
// 获取高亮后的结果
let highlightedText = highlightKeywords(tableData, keyword);
// 输出结果或更新 DOM
console.log(highlightedText);
// 在 HTML 中可以使用 "highlighted" 类进行样式设置
/*
<style>
.highlighted {
color: red;
}
</style>
*/- 第二种
javascript
let keyword = ["red", "color", ">"];
let tableData = {
MatchCompanyName: "color fjkfffs red >",
};
// 函数用于根据关键词高亮匹配项
function highlightKeywords(data, keywords) {
let matchCompanyName = data.MatchCompanyName;
let highlights = []; // 用于存储匹配的起始和结束位置
// 查找每个关键词的匹配位置
keywords.forEach((word) => {
const regex = new RegExp(word, 'gi'); // 大小写不敏感匹配
let match;
while ((match = regex.exec(matchCompanyName)) !== null) {
highlights.push({ start: match.index, end: regex.lastIndex });
}
});
// 按照匹配的位置从后往前插入 <span>，避免位置错乱
highlights.sort((a, b) => b.start - a.start);
highlights.forEach((highlight) => {
matchCompanyName =
matchCompanyName.slice(0, highlight.start) +
'<span class="highlighted">' +
matchCompanyName.slice(highlight.start, highlight.end) +
'</span>' +
matchCompanyName.slice(highlight.end);
});
return matchCompanyName;
}
// 获取高亮后的结果
let highlightedText = highlightKeywords(tableData, keyword);
// 输出结果或更新 DOM
console.log(highlightedText);
// 在 HTML 中可以使用 "highlighted" 类进行样式设置
/*
<style>
.highlighted {
color: red;
}
</style>
*/