vue 实现实时搜索文档关键字并高亮显示

<template>
  <div>
    <input type="text" v-model="searchQuery" @input="highlight(searchQuery)">
    <div v-html="highlightedText"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      searchQuery: '',
      highlightedText: ''
    };
  },
  methods: {
    highlight(query) {
      if (!query.trim()) {
        this.highlightedText = this.text;
        return;
      }
      // 使用正则表达式来高亮搜索词
      const highlighted = this.text.replace(new RegExp(query, 'gi'), match => `<span class="highlight">${match}</span>`);
      this.highlightedText = highlighted;
    }
  }
};
</script>
 
<style>
.highlight {
  background-color: yellow; /* 高亮颜色 */
}
</style>

这个简单的Vue组件包含一个文本输入框和一个用于显示高亮内容的div。输入框绑定了v-model来获取用户输入，并在输入时触发highlight方法。该方法使用正则表达式和模板字符串创建带有highlight类的span标签来高亮显示搜索词。通过v-html指令将处理过的HTML内容渲染到div中。