百度搜索效果高亮

423 阅读1分钟

在搜索或搜索之后 输入框搜索得字体高亮如下图

image.png

思路?

获取输入框值 = = = 获取需要高亮值

image.png

将1的值通过正则表达式匹配替换2的相同的值

怎么做?

代码如下

// 高亮关键字函数

// str传入被正则判断的值
export const highLight = (str:string, key:string) => {
  const Light = new RegExp(key, 'ig')
  return String(str).replace(Light, (k) => {
    console.log(k, '匹配到了')
    return '<span >' + k + '</span>'
    // return `<span>${k}</span>`
  })
}