線上直播系統原始碼，vue實現搜尋文字高亮功能

線上直播系統原始碼，vue實現搜尋文字高亮功能

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>

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 = `<span style="color: #0066FF">${this.PopUpSarCh}</span>`;
          result[index].title = item.title.replace(replaceReg, replaceString);
          result[index].name = item.name.replace(replaceReg, replaceString);
        }
      });
      this.records = result;
    },
  },
};

以上就是 線上直播系統原始碼，vue實現搜尋文字高亮功能，更多內容歡迎關注之後的文章