JS 实现关键字文本搜索 高亮显示

示例：

•  利用字符串的 split 方法，通过搜索的关键字分割成数组

•  在利用数组的 join 方法拼接成字符串

 我是利用mock的省份

<template>
  <div class="home">
    <input type="text" v-model.trim="SerachValue">
    <button @click="serach">点击搜索</button>
    <ul>
      <li v-for="(item, index) in cityMEList" :key="index">
        <span v-html="item"></span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  components: {
  },
  data() {
    return {
      SerachValue: '',
      cityMEList: []
    };
  },
  created() {
    
  },
  methods: {
    serach() {
      if(!this.SerachValue) {
        return
      }
      this.cityMEList = []
      axios.get("/cityMeunList").then(res => {
      const { list } = res.data

      list.forEach(item => {
        if(item.province.includes(this.SerachValue)) {
          let data = JSON.parse(JSON.stringify(item))
          let dataARr = data.province.split(this.SerachValue)       //字符串的方法先转成数组
          let str = dataARr.join('<span style="color:red;">' + this.SerachValue + '</span>')   // 在转成字符串
          this.cityMEList.push(str)
        }
      });
      console.log(list)
    })
    }
  }
}