实现搜索关键字匹配高亮

实现代码：

<view>
  <view v-for="(arr,index) in searchResult" :key="index">
    <view class="title">{{index=='user'?'用户':'群组'}}</view>
    <view class="item" v-for="item in arr" :key="item.id">
      <image :src="item.avatar" mode="aspectFill"></image>
      <text class="nickName" v-html="highlight(item.nickName)"></text>
      <view :class="item.isHave?'item-btn':'item-btn1'" @click="handleAdd(item.isHave,item.isGroup)">
        {{item.isHave?'发消息':item.isGroup?'加群组':'加好友'}}
      </view>
    </view>
  </view>
</view>
<script>
  import datas from '../../commons/js/datas';
  export default {
    data() {
      return {
        nickName: '',
        searchResult: {}
      };
    },
    onLoad() {
      this.search()
    },
    methods: {
      // 点击取消按钮
      goBack() {
        uni.navigateBack()
      },
      search() {
        this.searchResult = datas.searchResult()
      },
      handleChange() {},
      // 文字的高亮匹配
      highlight(text) {
        const regex = new RegExp(`[${this.nickName}]`, 'gi');
        const highlightedText = text.replace(regex, match => {
          return `<text style="color: #4AAAFF;">${match}</text>`;
        });
        return highlightedText;
      }    
    }
  }
</script>

高亮函数解析：

1. highlight(text)：这是一个函数的定义，接收一个参数 text，表示待处理的文本。

2. const regex = new RegExp([${this.nickName}], 'gi');：

   • 这一行创建了一个正则表达式对象 regex，用于匹配 this.nickName 中的任意字符。
   • 使用了模板字符串，其中 this.nickName 可能是一个字符串，表达式 [${this.nickName}] 会将 this.nickName 中的字符转换为一个字符集，表示匹配其中任意一个字符。
   • 'gi' 是正则表达式的修饰符，其中 g 表示全局匹配，i 表示不区分大小写。

3. const highlightedText = text.replace(regex, match => { return <text style="color: #4AAAFF;">${match}</text>; });：

   • 这一行使用 text.replace() 方法将文本中匹配到的部分进行替换。
   • regex 是之前定义的正则表达式对象，用于匹配文本中的内容。
   • match 是每次匹配到的子串，在这里表示与 this.nickName 中的字符匹配到的部分。
   • 替换的内容是 <text style="color: #4AAAFF;">${match}</text>，即将匹配到的部分用 <text> 标签包裹，并设置样式为蓝色。

4. return highlightedText;：返回处理后的文本，即高亮处理后的结果。

实现效果：

欢迎大家提供更好的方法来实现此功能