React实现文字高亮

半分钟

已于 2023-01-31 16:17:06 修改

阅读量1.5k

点赞数

分类专栏： React 文章标签： javascript 前端开发语言 react

于 2022-12-14 19:37:22 首次发布

本文链接：https://blog.csdn.net/weixin_43846024/article/details/128320848

版权

在React项目开发中，需要实现搜索后高亮显示关键词，特别是当文本包含表情图片和代码块等HTML元素时。通过抽取HTML标签并重新生成高亮字符串，结合`dangerouslySetInnerHTML`解析，成功解决了这个问题。文中还提到了原有实现的bug及改良后的解决方案。

摘要由CSDN通过智能技术生成

在项目开发中遇到一个头疼的问题，就是在搜索数据后渲染的同时把框出来的部分命中搜索关键词经行高亮，如果是普通的字符串高亮很简单，调用_match方法就行了当然，可以直接返回jsx（代码中被注释的部分），但是如图，不是纯文本，里面掺杂中表情的img标签，也有可能是提交的代码块，比如：

dal;jksdajk[闭嘴][闭嘴][大哭][再见][亲亲][示爱][哈欠]dajalkjg <img src=“eeee.png” alt=“图片” />@cp1 @cp2

其中img标签是不允许被破坏的，所以就需要对文本进行抽取其中的html标签部分后在重新生成新的高亮后的字符串或jsx，在react中通过 dangerouslySetInnerHTML经行解析，最终实现效果如下图

在这里插入图片描述

  const _match = (keyword, content) => {
    const reg = new RegExp(keyword.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&'), 'ig')

    const splitIconTypes = content.split(reg)
    const match = content.match(reg)
    let matchStr = (match || [])
      .map((_, index) => {
        ret