美文网首页
JS 实现关键词高亮显示 正则匹配

JS 实现关键词高亮显示 正则匹配

作者: Cherry丶小丸子 | 来源:发表于2021-12-06 14:32 被阅读0次
    /**
     * 匹配每一个关键字字符
     * @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;
    }
    

    相关文章

      网友评论

          本文标题:JS 实现关键词高亮显示 正则匹配

          本文链接:https://www.haomeiwen.com/subject/mwfsxrtx.html