前端：自定义关键词高亮显示

怕冷的火焰（~杰）

已于 2022-09-19 10:53:11 修改

阅读量570

点赞数

分类专栏：前端文章标签：前端 javascript html

于 2022-09-08 16:50:21 首次发布

本文链接：https://blog.csdn.net/weixin_50236973/article/details/126767859

版权

前端专栏收录该内容

52 篇文章 0 订阅

订阅专栏

const highLight = (text, keyword) => {
    const len = keyword.length;
    let correctText = keyword;
    const specialStr = ['*', '.', '?', '+', '$', '^', '[', ']', '{', '}', '|', '\\', '(', ')', '/', '%'];
    let newText = '';
    if (len !== 0) {
        let index = 0;
        specialStr.map(item => {
            if (correctText.includes(item)) {
                correctText = correctText.replace(new RegExp(`\\${item}`, 'g'), `a1s2d3${item}`);
            }
        });
        correctText = correctText.replace(new RegExp('a1s2d3', 'g'), `\\`);
        const matchData = new RegExp(correctText, 'i').exec(text);
        if (matchData) {
            index = matchData.index;
            newText += text.slice(0, index);
            newText += `<span class="highlight" style='color: #F94E22;'>${text.slice(index, index + len)}</span>`;
            if (text.slice(index + len).length > 0) {
                newText += highLight(text.slice(index + len), keyword);
            }
        } else {
            newText += text;
        }
    } else {
        newText = text;
    }
    newText = newText.replace(/%5f/g, '_');
    newText = newText.replace(/%27/g, "'");
    return newText;
};

export default highLight;

// 在jsx文件内使用(highLight('使用highLight高亮搜索的内容', 'highLight'); highLight会高亮)
<span dangerouslySetInnerHTML={{__html: highLight('使用highLight高亮搜索的内容', 'highLight')}}></span>