内容处理高亮

1.高亮处理函数

// keyWord 匹配字符
// suggtion 匹配内容段
export function hightLight (keyWord, suggtion) {
  // 使用 regexp 构造函数，因为这里要匹配的是一个变量
  const reg = new RegExp(keyWord, 'ig')
//内容段匹配以及添加样式
  const newSrt = String(suggtion).replace(reg, function (p) {
    return "<span style='color: red'>" + p + '</span>'
  })
// 返回处理后的值
  return newSrt
}

2.HTML 展示

1》 数据

// 数据
data() {
  return {
    keyWord: '高亮'
    suggtion: '在前端开发中，要实现文字搜索高亮效果，你可以使用JavaScript来搜索文本并通过CSS或其他方式对匹配的文本进行高亮处理。以下是一种常见的方法,在前端开发中，要实现文字搜索高亮效果，你可以使用JavaScript来搜索文本并通过CSS或其他方式对匹配的文本进行高亮处理。以下是一种常见的方法'
  }
}

2》 标签展示

// 标签展示
<span v-html="hightLightValue(keyWord, suggtion)"></span>

3》 高亮内容

  // 高亮内容
  hightLightValue(keyWord, suggtion) {
      return hightLight(keyWord, suggtion)
    },

3.最终得到的结果

微信截图_20240624160640.png