react搜索结果显示高亮（自定义颜色）

在做项目的时候，产品要求搜索结果高亮，方法如下：

我这里的是搜索名称高亮，用dangerouslySetInnerHTML来替换。

<span className={`${styles.font16} `} style={{ color: '#333333', fontWeight: '500', lineHeight: '5.87vw'}} dangerouslySetInnerHTML={{__html:highLight(val2.hospitalName,search)}}>
</span>

v12.hospitalNames是渲染出来默认值，search是搜索框里的搜索内容。

---

高亮方法

const highLight = (n, m) => {
        let str = n;
        let word = m;
        let result = str.replace(new RegExp('(' + word + ')', 'ig'), '<span style="color:#12B8D7" >' + word + '</span>');
        return result
    };

n是默认值，m是搜索值，用replace方法替换原本的样式，再渲染到页面列表中去。

---

效果如图：