封装搜索关键词高亮的函数

最新推荐文章于 2025-08-06 16:42:26 发布

Nero09xx

最新推荐文章于 2025-08-06 16:42:26 发布

阅读量248

点赞数

CC 4.0 BY-SA版权

文章标签： js javascript 前端 react

本文链接：https://blog.youkuaiyun.com/qq_60292609/article/details/121819685

本文介绍如何使用const highLight函数高亮显示输入框中关键词，通过正则表达式实现动态替换，并通过实例演示其在实际编程中的用法。

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

目的:
在这里插入图片描述

高亮的高阶函数

 const highLight = (str: string) => {
 // srt为 例如整条文字: Javascript 高阶函数(上)
 // content 为输入框当前输入的值
 // 使用正则匹配 `i`不区分大小写 , `g`为全局匹配
    const hStr = str.replace(new RegExp(content, 'ig'), (newStr) => {
      return `<span>${newStr}</span>`
    })
    // console.log(hStr) // <span>Javascript</span> 高阶函数(上)

    return hStr
  }