vue实现搜索高亮显示

2026-01-22 13:32:19VUE

实现搜索高亮的基本思路

在Vue中实现搜索高亮的核心逻辑是通过正则表达式匹配关键词，并将匹配到的内容替换为带有高亮样式的HTML标签（如<span class="highlight">）。需要结合Vue的数据绑定和动态渲染特性。

定义高亮样式

在CSS中定义高亮样式，例如：

.highlight {
  background-color: yellow;
  color: black;
  font-weight: bold;
}

创建高亮方法

在Vue组件中定义一个方法，用于处理文本并返回高亮后的HTML字符串：

vue实现搜索高亮显示

methods: {
  highlightText(text, keyword) {
    if (!keyword) return text;
    const regex = new RegExp(keyword, 'gi');
    return text.replace(regex, match => `<span class="highlight">${match}</span>`);
  }
}

模板中使用高亮

在模板中通过v-html指令渲染高亮后的内容（注意防范XSS风险）：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="输入搜索关键词" />
    <div v-html="highlightText(originalText, searchKeyword)"></div>
  </div>
</template>

处理多关键词高亮

若需支持多关键词高亮，可扩展高亮方法：

vue实现搜索高亮显示

highlightText(text, keywords) {
  if (!keywords) return text;
  const keywordArray = keywords.split(' ');
  let result = text;
  keywordArray.forEach(keyword => {
    if (keyword) {
      const regex = new RegExp(keyword, 'gi');
      result = result.replace(regex, match => `<span class="highlight">${match}</span>`);
    }
  });
  return result;
}

安全性注意事项

使用v-html时需确保内容可信，避免XSS攻击。可通过DOMPurify等库过滤危险内容：

import DOMPurify from 'dompurify';
// ...
highlightText(text, keyword) {
  const highlighted = /* 高亮逻辑 */;
  return DOMPurify.sanitize(highlighted);
}

性能优化建议

对于大量文本的高亮操作，可通过以下方式优化：

使用防抖（debounce）延迟高亮计算
避免在每次输入时重新处理整个文本
考虑虚拟滚动技术处理长列表

完整组件示例

<template>
  <div>
    <input v-model="searchKeyword" placeholder="输入搜索关键词" />
    <div v-html="safeHighlightedText"></div>
  </div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      originalText: '这是一段需要高亮显示的示例文本，包含多个关键词。',
      searchKeyword: ''
    };
  },
  computed: {
    safeHighlightedText() {
      return DOMPurify.sanitize(this.highlightText(this.originalText, this.searchKeyword));
    }
  },
  methods: {
    highlightText(text, keyword) {
      if (!keyword) return text;
      const regex = new RegExp(keyword, 'gi');
      return text.replace(regex, match => `<span class="highlight">${match}</span>`);
    }
  }
};
</script>

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