React 搜索框封装关键字高亮函数

最新推荐文章于 2023-08-08 19:47:58 发布

小脚裤了都

最新推荐文章于 2023-08-08 19:47:58 发布

阅读量577

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/cvvvvvvvvvv/article/details/121797766

版权

本文介绍了如何实现一个函数，该函数接收两个参数，用于在字符串中高亮显示指定的关键字。通过使用正则表达式和`replace`方法，将查询的关键字包裹在`<span>`标签中，以在页面上突出显示。同时，提到了在React中使用`dangerouslySetInnerHTML`属性将HTML字符串转化为DOM节点，展示了其基本使用方法和效果。

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

思路：

在这里插入图片描述
函数需要传入两个参数，第一个参数为被查询的元素，第二个参数为查询的关键字。
给查询到的关键字用包裹
实现代码如下：

// 封装高亮函数(被查询的元素，查询字符)
function highLight (str: string, keyword: string) {
  // 使用replace通过正则查找keyword里对应的字符 (区分大小写)，(match)是匹配的字符，返回一个模板字符串给查询到的关键字添加<span></span>标签
  return str.replace(RegExp(keyword, 'ig'), (match) => {
    return `<span>${match}</span>`
  })
}

调用这个函数：
在这里插入图片描述
现在可以得到如下效果：

在react中也提供了一个属性可以帮我们将dom字符串转化为dom节点： dangerouslySetInnerHTML

基本使用方法：

<div dangerouslySetInnerHTML={{__html: '<a href="">跳转</a>'}}></div>

使用：（css样子自己设置）
在这里插入图片描述

效果：
在这里插入图片描述

React 搜索框 封装关键字高亮函数

思路：

React 搜索框封装关键字高亮函数