react 搜索框高亮关键字（函数封装）

最新推荐文章于 2025-05-09 15:33:17 发布

留着鼻涕敲代码

最新推荐文章于 2025-05-09 15:33:17 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_58515303/article/details/121892799

react 同时被 2 个专栏收录

15 篇文章

订阅专栏

typeScript

5 篇文章

订阅专栏

本文介绍了如何使用JavaScript的String.prototype.replace方法实现搜索关键字高亮，通过将匹配内容包裹在<span>标签中实现高亮效果。同时，讲解了在React中由于安全原因，不能直接渲染字符串中的HTML，需要借助dangerouslySetInnerHTML属性来安全地插入内联HTML。文中还给出了具体的代码示例和使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.目标

搜索框搜索时输入的内容高亮起来，使用String.prototype.replace完成函数封装
在这里插入图片描述

2. String.prototype.replace

链接：https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/String/replace

格式：

-在目标字符串中，用正则做匹配，如果匹配到，就用参数2的返回值来替代匹配的部分

const 新字符串 = 目标字符串.replace(正则表达式，function(匹配结果) {
               		return 对匹配到的内容的替换结果
				})

3. 封装高亮函数

敲黑板!!! 我这里是对span做了处理的(被span包起来就可以高亮)

  /**
   * 传入两个参数
   * @param str 目标字符串（需要被筛选的字符串）
   * @param keyword 筛选条件（筛选需要高亮的字符串）
   * @returns 返回处理后字符串
   */
const highLight = (str， keyword) => { 
  return str.replace(new RegExp(keyword, 'gi'), (match) => {
		return `<span>${match}</span>`
	}
  )
}

4.使用高亮函数

react中是不能直接将字符串中的标签进行渲染，如下标签会被当做字符串渲染

4.1.react的innerHTML----------dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 的替换方案。
格式：

      <div dangerouslySetInnerHTML={{ __html: '<h1>abc</h1>' }} />

4.2.使用高亮函数

//highLight(item，value) 第一个参数是需要做处理的字符串   第二个需要高亮的字样
<div
  className="result-value text-overflow"
  dangerouslySetInnerHTML={{
    __html: highLight(item)
  }}
></div>