当前位置：首页 > VUE

vue实现高亮显示

2026-01-19 13:44:04VUE

Vue 实现高亮显示的方法

在 Vue 中实现高亮显示通常涉及文本匹配和样式动态切换。以下是几种常见实现方式：

使用 v-html 和字符串替换

通过替换目标文本为带样式的 HTML 实现高亮：

<template>
  <div v-html="highlightedText"></div>
</template>

<script>
export default {
  data() {
    return {
      originalText: 'This is a sample text for highlighting',
      searchTerm: 'sample'
    }
  },
  computed: {
    highlightedText() {
      return this.originalText.replace(
        new RegExp(this.searchTerm, 'gi'),
        match => `<span class="highlight">${match}</span>`
      )
    }
  }
}
</script>

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

使用自定义指令

创建可复用的高亮指令：

Vue.directive('highlight', {
  inserted(el, binding) {
    const text = el.textContent
    const term = binding.value
    const regex = new RegExp(term, 'gi')
    el.innerHTML = text.replace(regex, match => 
      `<span style="background-color: yellow">${match}</span>`
    )
  }
})

// 使用方式
<div v-highlight="'search term'">Some text containing search term</div>

基于组件的高亮方案

创建可复用的高亮组件：

<template>
  <span>
    <span v-for="(part, index) in parts" :key="index" :class="{ highlight: part.highlight }">
      {{ part.text }}
    </span>
  </span>
</template>

<script>
export default {
  props: ['text', 'query'],
  computed: {
    parts() {
      const regex = new RegExp(`(${this.query})`, 'gi')
      return this.text.split(regex).map(part => ({
        text: part,
        highlight: regex.test(part)
      }))
    }
  }
}
</script>

使用第三方库

考虑使用专门的高亮库如 mark.js：

npm install mark.js

// 组件中使用
import Mark from 'mark.js'

export default {
  methods: {
    highlight() {
      const instance = new Mark(this.$refs.highlightContainer)
      instance.mark(this.searchTerm, {
        className: 'highlight'
      })
    }
  },
  mounted() {
    this.highlight()
  }
}

动态样式绑定

对于简单场景可使用动态 class 绑定：

<template>
  <span :class="{ 'text-yellow': shouldHighlight }">
    {{ text }}
  </span>
</template>

<script>
export default {
  props: ['text', 'shouldHighlight']
}
</script>

每种方法适用于不同场景，v-html 方案适合简单替换，自定义指令提供更好的复用性，组件方案更灵活，第三方库适合复杂高亮需求。注意使用 v-html 时需防范 XSS 风险，对用户输入内容进行适当过滤。

vue实现高亮显示