1 搜索关键词高亮

1.1 思路分析

问：如何将字符串中的指定字符在网页中高亮展示？

答：将需要高亮的字符包裹 HTML 标签，为其单独设置颜色。如：

"Hello <span style="color: red">World</span>"

问：在 Vue 中如何渲染带有 HTML 标签的字符串？

答：使用v-html命令符

<div>{{ htmlStr }}</div>
<div v-html="htmlStr"></div>

data () {
  return {
    htmlStr: 'Hello <span style="color: red">World</span>'
  }
}

问：如何把字符串中指定字符统一替换为高亮（包裹了 HTML）的字符？

答：使用replace方法进行替换(replace/replaceAll)

const str = "Hello World"

// 结果：<span style="color: red">Hello</span> World
"Hello World".replace('Hello', '<span style="color: red">Hello</span>')

// 需要注意的是，replace 方法的字符串匹配只能替换第1个满足的字符
// <span style="color: red">Hello</span> World Hello abc
"Hello World Hello abc".replace('Hello', '<span style="color: red">Hello</span>')



// 需要注意的是，如果想要全文替换，replaceAll  方法可以全部替换
// <span style="color: red">Hello</span> World <span style="color: red">Hello</span> abc
"Hello World Hello abc".replaceAll('Hello', '<span style="color: red">Hello</span>')



// 如果想要全文替换，使用正则表达式
// g 全局
// i 忽略大小写
// <span style="color: red">Hello</span> World <span style="color: red">Hello</span> abc
"Hello World Hello abc".replace(/Hello/gi, '<span style="color: red">Hello</span>')

如果感觉使用正则麻烦，可是使用split和join的组合用法

var str = "hello world 你好 hello";

// ["", " world 你好 ", ""]
const arr = str.split("hello");

// "<span>hello</span> world 你好 <span>hello</span>"
arr.join("<span>hello</span>");

1.2 高亮操作

将文本设置为插槽

    <van-cell
    v-for="(item, index) in suggestions"
    :key="index"
    icon="search">
      <span slot="title" v-html="item"></span>
    </van-cell>

在 methods 中添加一个方法处理高亮

     // 高亮展示数据处理方法
 highlight (value) {
   // value 是需要进行高亮处理的字符串
   // 1. 生成富文本格式 - 搜索框关键字的标签形式
   const highlightStr = `<span style="color: red;">${this.seachInput}</span>`
   // 2. 通过替换的方式改写字符串
   // 2.1  方案一 >>>>>>>>>>> 使用 replaceAll 来实现
   // const tempStr = value.replaceAll(this.seachInput, highlightStr)

   // 2.2 方案二 >>>>>>>>>>>  使用正则表达式 + replace的 组合来实现
   // const reg = new RegExp(this.seachInput, 'gi')
   // const tempStr = value.replace(reg, highlightStr)

   // 2.3 方案三 >>>>>>>>>>> 通过split和join的组合使用
   const tempStr = value.split(this.seachInput).join(highlightStr)
   return tempStr
 }

在联想建议列表项中绑定调用

<template>
  <div class="search-suggestion">
    <van-cell
    v-for="(item, index) in suggestions"
    :key="index"
    icon="search">
      <span slot="title" v-html="highlight(item)"></span>
    </van-cell>
  </div>
</template>

<style scoped lang="less">
.search-suggestion {
  /deep/ span.active {
    color: #3296fa;
  }
}
</style>

Vue如何实现搜索框关键字高亮

1 搜索关键词高亮

1.1 思路分析

1.2 高亮操作