vue需求：模糊查询，并且高亮，希望搜索一句话中任意的词，都可以搜索到，

Question

需求：模糊查询，并且高亮，希望搜索一句话中任意的词，都可以搜索到，
需求1举例：比如搜索西，搜索到所有带西的句子，
需求2举例: 搜索西大，可以查询到带有西或者大的句子，并且全部高亮。

<template>
  <div>
    <input v-model="keyword" placeholder="请输入搜索关键字">
    <ul>
      <li v-for="(item, index) in filteredData" :key="index" v-html="highlight(item.text)"></li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      data: [
        { text: '西安的城墙很大。' },
        { text: '西安交通大学是一所985高校。' },
        { text: '我喜欢吃西瓜。' },
        { text: '这是一份西式菜谱。' }
      ]
    }
  },
  computed: {
    filteredData() {
      const pattern = new RegExp(this.keyword.split(/\s+/).join('.*'), 'gi');
      return this.data.filter(item => pattern.test(item.text));
    }
  },
  methods: {
    highlight(text) {
      const pattern = new RegExp(this.keyword.split(/\s+/).join('|'), 'gi');
      return text.replace(pattern, '<span style="color: red">$&</span>');
    }
  }
}
</script>

Answer 1

<template>
  <div>
    <input v-model="keyword" @input="search" placeholder="请输入关键词">
    <ul>
      <li v-for="(item, index) in searchResult" :key="index">
        <p v-html="highlight(item)"></p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      sourceData: [
        '西风吹老洞庭波，一夜湘君白发多',
        '月落乌啼霜满天，江枫渔火对愁眠',
        '大漠孤烟直，长河落日圆',
        '黄沙百战穿金甲，不破楼兰终不还',
        '故人具鸡黍，邀我至田家',
        '重阳节到处飘香，采菊东篱下',
        '青山遮不住，毕竟东流去'
      ]
    }
  },
  computed: {
    // 搜索结果
    searchResult() {
      const reg = new RegExp(this.keyword, 'gi') // 忽略大小写的正则表达式
      return this.sourceData.filter(item => reg.test(item))
    }
  },
  methods: {
    // 高亮匹配的关键词
    highlight(str) {
      return str.replace(new RegExp(this.keyword, 'gi'), `<span style="color: red">${this.keyword}</span>`)
    },
    // 执行搜索
    search() {
      this.keyword = this.keyword.trim() // 去除首尾空格
    }
  }
}
</script>