前端搜索高亮实现vue

实现前端搜索高亮（Vue）

在Vue中实现搜索高亮功能，可以通过动态渲染文本并结合正则表达式匹配关键词。以下是两种常见方法：

方法一：使用v-html与正则替换

通过正则表达式匹配搜索词，将匹配部分包裹高亮样式标签（如<span class="highlight">），再通过v-html渲染。

<template>
  <div>
    <input v-model="searchText" placeholder="输入搜索词" />
    <div v-html="highlightedContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: '这里是需要被搜索的原始文本内容',
      searchText: ''
    };
  },
  computed: {
    highlightedContent() {
      if (!this.searchText) return this.originalText;
      const regex = new RegExp(this.searchText, 'gi');
      return this.originalText.replace(
        regex,
        match => `<span class="highlight">${match}</span>`
      );
    }
  }
};
</script>

<style>
.highlight {
  background-color: yellow;
  font-weight: bold;
}
</style>

方法二：使用渲染函数（Render Function）

适用于需要更复杂逻辑或避免v-html潜在XSS风险的场景。通过拆分文本为数组，动态生成带样式的片段。

<template>
  <div>
    <input v-model="searchText" placeholder="输入搜索词" />
    <div>
      <span v-for="(part, index) in parts" :key="index" :class="{ highlight: part.highlight }">
        {{ part.text }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: '这里是需要被搜索的原始文本内容',
      searchText: ''
    };
  },
  computed: {
    parts() {
      if (!this.searchText) return [{ text: this.originalText, highlight: false }];
      const regex = new RegExp(`(${this.searchText})`, 'gi');
      return this.originalText.split(regex).map(part => ({
        text: part,
        highlight: regex.test(part)
      }));
    }
  }
};
</script>

注意事项

1. 性能优化：对长文本频繁搜索时，使用防抖（如lodash.debounce）减少计算次数。
2. 大小写敏感：根据需求调整正则表达式标志（如i忽略大小写）。
3. XSS防护：若搜索词来自用户输入，需对动态HTML内容进行转义（如使用DOMPurify库）。
4. 多关键词支持：扩展正则表达式为/(word1|word2)/gi可匹配多个词。