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;
}
上一篇下一篇

猜你喜欢

热点阅读