Vue は検索キーワードの強調表示を実装します

最近モバイルプロジェクトを書いているときに、検索キーワードを強調表示する必要が生じたので、それを記録するために記事を書きました

まずは効果を見てみましょう:

 

上記は実現効果表示です。

全体的なアイデア: バックグラウンドから返されたデータを操作し (ここではデータをシミュレートしています)、正規表現を使用して検索キーワードを照合し、replace を使用して文字列を置換します。レンダリング データ部分は、動的表示のために v-html を使用して実現できます。 。

コードは次のとおりです。

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>

jsコード:

export default {
  data() {
    return {
      list: [],
      PopUpSarCh: "",
 
    };
  },
  methods: {
    // 搜索框方法
    onSearch() {
      //每次搜索前清空
      this.list = [];
      var arr = [
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
        {
          title: "直装直提办理业务",
          name: "进口水果'船边直提'大铲湾码头水果通过效率第一，进口水果船边直提",
        },
      ];
      this.list = arr;
      this.changeColor(this.list);//调用搜索词方法
    },
    // 搜索关键词高亮方法
    changeColor(result) {
      //result为接口返回的数据
      result.map((item, index) => {
        if (this.PopUpSarCh) {
          /**
           * 使用正则表达式进行全文匹配关键词
           * ig : 表示 全文查找 ,忽略大小写
           *  i : 忽略大小写
           *  g : 全文查找
           *
           * 使用字符串的replace方法进行替换
           * stringObject.replace('被替换的值',替换的值)
              title和name是你要高亮的字段
           */
          let replaceReg = new RegExp(this.PopUpSarCh, "ig");
          let replaceString = `<span style="color: #ed4014">${this.PopUpSarCh}</span>`;
          result[index].title = item.title.replace(replaceReg, replaceString);
          result[index].name = item.name.replace(replaceReg, replaceString);
        }
      });
      this.records = result;
    },
  },
};