在react项目中,将关键字高亮显示 :

首先封装一个方法,只需要传入('要检索的内容','检索的关键字','给内容中的关键字加上的有特殊标记的标签名')这三个参数即可高亮显示关键字。详见:https://segmentfault.com/a/1190000017433594

warpTag(content, keyword, tagName) {
        if (content === "No results") {
            return content
        }
        const a = content.toLowerCase();
        const b = keyword.toLowerCase();

        const indexof = a.indexOf(b);
        const c = indexof > -1 ? content.substr(indexof, keyword.length) : '';
        const val = `<${tagName} style="color:red;">${c}</${tagName}>`;
        const regS = new RegExp(keyword, 'gi');
        return content.replace(regS, val);
    }

如何调用:

<a href="#" dangerouslySetInnerHTML={{__html: this.warpTag(item.title, "js", "span")}}></a>

效果展示:

上面代码相当于vue框架中的v-html功能。如果不像上面那样写,而是直接放到a标签内的话: <a href="#" >{this.warpTag(item.title, "js", "span")}</a>显示的效果会如下:

01-22 01:24