vue实现搜索文字高亮功能

在前端开发中，要实现文字搜索高亮效果，你可以使用JavaScript来搜索文本并通过CSS或其他方式对匹配的文本进行高亮处理。以下是一种常见的方法：

实现步骤：
1、 获取用户输入的搜索词。
2、创建一个正则表达式，以全局（g）不区分大小写（i）的方式匹配搜索词。
获取文本内容。
3、使用正则表达式替换匹配的文本，并在匹配文本周围添加高亮类。
4、更新文本内容。

一、使用示例

1、在页面中使用v-html渲染

	<template>
  <div class="box">
    <!-- 搜索框 -->
    <div class="mySearch">
      <van-search
        v-model="PopUpSarCh"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        class="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
   
    <!-- 搜索结果 -->
    <div class="SearchResults">
      <div class="SearchContent" v-for="(item, index) in list" :key="index">
        <h5 v-html="item.title"></h5>
        <div class="myContent" v-html="item.name"></div>
        <div class="dotted"></div>
      </div>
    </div>
   
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2、实现高亮的js方法

export default {
  data() {
    return {
      list: [], // 被检索的数组对象，按照需求定义
      PopUpSarCh: "",
    };
  },
  methods: {
    // 搜索框方法
    onSearch() {
      //每次搜索前清空
      this.list = [];
      var arr = []; // 接口查询内容
      this.list = arr;
      this.changeColor(this.list);//调用搜索词方法
    },
    // 搜索关键词高亮方法
    changeColor(result) {
      //result为接口返回的数据
      result.map((item, index) => {
        if (this.PopUpSarCh) {
          let replaceReg = new RegExp(this.PopUpSarCh, "ig");
          let replaceString = `${this.PopUpSarCh}`;
          result[index].title = item.title.replace(replaceReg, replaceString);
          result[index].name = item.name.replace(replaceReg, replaceString);
        }
      });
      this.records = result;
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

二、封装高亮工具类并使用

export function hightLight (keyWord: string, suggtion: string) {
    // 使用 regexp 构造函数，因为这里要匹配的是一个变量
    const reg = new RegExp(keyWord, 'ig')
    const newSrt = String(suggtion).replace(reg, function (p) {
      return '' + p + ''
    })
    return newSrt
  }
1
2
3
4
5
6
7
8

import { hightLight  } from '@/utils'
hightLight('关键字', '关键字匹配')
1
2