如何让搜索关键字高亮

一：实现思路

二：补充说明

正则的两种写法：/Exp/、new RegExp("Exp")

区别：

/Exp/书写方便，但只能匹配常量，无法解析变量 ；new RegExp(“Exp”)可解析变量

语法（常用）：

标识符：g(全局匹配)、i(不区分大小写)、m(多行匹配)，可同时使用，例如：/Exp/gi、new RegExp("Exp","g")；

实现效果如下gif:(此处的数据是假数据来进行模拟的)

具体代码如下：

父组件

<template>
  <div class="searchBox">
    <!--搜索框  -->
    <form action="/">
      <van-search
        v-model="searchText"
        shape="round"
        background="#3296fa"
        placeholder="请输入搜索关键词"
        show-action
        @search="onSearch"
        @cancel="$router.back()"
        @focus="isShowResult = false"
      />
    </form>
    <!-- 
        1.如果搜索框有内容则显示联想建议
        2.如果搜索框有内容，并且按回车键则显示搜索结果的内容
        3.其他则显示搜索历史
        4.搜索框聚焦的时候显示联想建议
     -->
    <!-- 联想建议 -->
    <search-suggest v-if="searchText && !isShowResult"  :searchText="searchText"></search-suggest>
    <!-- 搜索结果 -->
    <search-record v-else-if="isShowResult"></search-record>
    <!-- 历史记录 -->
    <search-history v-else></search-history>
  </div>
</template>

<script>
import SearchHistory from "./Cpn/searchHistory.vue";
import SearchRecord from "./Cpn/searchRecord.vue";
import SearchSuggest from "./Cpn/searchSuggest.vue";

export default {
  name: "Search",
  components: {
    SearchHistory,
    SearchSuggest,
    SearchRecord,
  },
  data() {
    return {
      searchText: "",
      isShowResult: false,
    };
  },
  methods: {
    onSearch() {
      this.isShowResult = true;
    },
    onCancel() {
      console.log("false");
    },
  },
};
</script>

<style lang="less" scoped>
.searchBox {
  background: #eee;
  height: 100%;
}
.van-search {
  height: 46px;
}
.van-search__content--round {
  height: 32px;
}
.van-search__action {
  color: #fff;
  background: unset;
}
</style>

父组件部分代码解析如下：

子组件

<template>
  <div>
    <!-- v-html 会覆盖标签之间的内容 -->
    <van-cell
      icon="search"
      v-for="(item, index) in suggestionList"
      :key="index"
    >
      <div slot="title" v-html="handleHtml(item.name)"></div>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    searchText: {
      type: String,
      require: true,
    },
  },
  data() {
    return {
      suggestionList: [
        { id: 1, name: "11aa22aa哈哈" },
        { id: 2, name: "aa哈11aa哈" },
        { id: 3, name: "33aa11aa" },
        { id: 4, name: "11aa44aa哈哈" },
        { id: 5, name: "11aa哈aa哈哈哈" },
        { id: 6, name: "11aafff" },
        { id: 7, name: "11aa44daaa" },
      ],
    };
  },
  watch: {
    searchText: {
      handler() {
        //发送请求获取联想建议的数据
      },
      immediate: true,
    },
  },
  methods: {
    handleHtml(str) {
      // return str.replace(/1/ig,'哈')
      let replaceText = new RegExp(this.searchText, "ig");
      return str.replace(
        replaceText,
        `<span style="color:red;">${this.searchText}</span>`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

子组件部分代码解析如下：