JS 实现关键词高亮显示 正则匹配
2021-12-06 本文已影响0人
Cherry丶小丸子
/**
* 匹配每一个关键字字符
* @param {Object} text 内容
* @param {Object} keyword 关键词
* @param {Object} tag 被包裹的标签
*/
function highLightKeywords(text, keyword, tag) {
// 默认的标签,如果没有指定,使用span
tag = tag || 'span';
let len = keyword.length;
for (let i = 0; i < len; i++) {
// 正则匹配所有的文本
let reg = new RegExp(keyword[i], 'g');
if (reg.test(text)) {
text = text.replace(reg, '<' + tag + ' class="highlight">' + text + '</' + tag + '>');
}
}
return text;
}
/**
* 匹配整个关键词 不拆分
* @param {Object} text 内容
* @param {Object} keyword 关键词
* @param {Object} tag 被包裹的标签
*/
function highLightKeywords(text, keyword, tag) {
// 默认的标签,如果没有指定,使用span
tag = tag || 'span';
// 匹配每一个特殊字符 ,进行转义
let specialStr = ["*", ".", "?", "+", "$", "^", "[", "]", "{", "}", "|", "\\", "(", ")", "/", "%"];
specialStr.map((item, index) => {
if(keyword.indexOf(item) != -1) {
keyword = keyword.replace(new RegExp("\\" + item, 'g'), "\\" + item);
}
})
// 匹配整个关键词
let reg = new RegExp(keyword, 'g');
if(reg.test(text)) {
text = text.replace(reg, '<' + tag + ' class="highlight">' + text + '</' + tag + '>');
}
return text;
}