vue实现高亮

Vue实现文本高亮的几种方法

在Vue中实现文本高亮可以通过多种方式完成，以下是几种常见的方法：

使用v-html指令

通过将需要高亮的文本替换为HTML标签，再使用v-html渲染：

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

<script>
export default {
  data() {
    return {
      originalText: '这是一个需要高亮的文本',
      keyword: '高亮'
    }
  },
  computed: {
    highlightedText() {
      const regex = new RegExp(this.keyword, 'gi')
      return this.originalText.replace(regex, match => 
        `<span style="background-color: yellow">${match}</span>`
      )
    }
  }
}
</script>

使用自定义指令

创建一个高亮指令，可复用性更强：

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

// 使用方式
<template>
  <div v-highlight="keyword">{{ originalText }}</div>
</template>

使用组件封装

创建一个专门的高亮组件，更易于维护：

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

<script>
export default {
  props: {
    text: String,
    keyword: String
  },
  computed: {
    parts() {
      if (!this.keyword) return [{ text: this.text, highlight: false }]

      const regex = new RegExp(this.keyword, 'gi')
      const parts = []
      let lastIndex = 0
      let match

      while ((match = regex.exec(this.text)) !== null) {
        if (match.index > lastIndex) {
          parts.push({
            text: this.text.slice(lastIndex, match.index),
            highlight: false
          })
        }

        parts.push({
          text: match[0],
          highlight: true
        })

        lastIndex = match.index + match[0].length
      }

      if (lastIndex < this.text.length) {
        parts.push({
          text: this.text.slice(lastIndex),
          highlight: false
        })
      }

      return parts
    }
  }
}
</script>

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

使用第三方库

可以使用专门的高亮库如mark.js：

npm install mark.js

// 组件中使用
<template>
  <div ref="content">
    {{ content }}
  </div>
</template>

<script>
import Mark from 'mark.js'

export default {
  data() {
    return {
      content: '需要高亮的文本内容',
      keyword: '高亮'
    }
  },
  watch: {
    keyword(newVal) {
      this.highlightText(newVal)
    }
  },
  methods: {
    highlightText(keyword) {
      const instance = new Mark(this.$refs.content)
      instance.unmark()
      if (keyword) {
        instance.mark(keyword, {
          className: 'highlight'
        })
      }
    }
  },
  mounted() {
    this.highlightText(this.keyword)
  }
}
</script>

性能优化建议

对于大量文本的高亮操作，建议使用虚拟滚动或分页加载技术，避免一次性处理过多DOM节点影响性能。

动态高亮时，使用防抖或节流技术减少高频操作带来的性能开销：

import { debounce } from 'lodash'

methods: {
  highlightText: debounce(function(keyword) {
    // 高亮逻辑
  }, 300)
}

安全注意事项

使用v-html时要特别注意XSS攻击风险，确保高亮的内容来自可信源，或对输入内容进行适当的转义和过滤。