vue富文本实现高亮
vue富文本实现高亮的方法
在Vue中实现富文本高亮功能，可以通过多种方式完成。以下是几种常见的方法：
使用v-html指令
通过v-html指令可以将包含HTML标签的字符串渲染到页面上。结合字符串替换方法，可以实现关键词高亮。
<template>
<div v-html="highlightedText"></div>
</template>
<script>
export default {
data() {
return {
originalText: '这是一段需要高亮的文本',
keyword: '高亮'
}
},
computed: {
highlightedText() {
return this.originalText.replace(
new RegExp(this.keyword, 'g'),
'<span style="background-color: yellow">' + this.keyword + '</span>'
)
}
}
}
</script>使用自定义指令
创建自定义指令可以更灵活地控制高亮行为，便于在多个组件中复用。
Vue.directive('highlight', {
inserted(el, binding) {
const text = el.textContent
const keyword = binding.value
const highlighted = text.replace(
new RegExp(keyword, 'g'),
`<span style="background-color: yellow">${keyword}</span>`
)
el.innerHTML = highlighted
}
})
// 使用方式
<template>
<div v-highlight="keyword">{{ originalText }}</div>
</template>使用第三方库
对于更复杂的高亮需求，可以考虑使用专门的高亮库，如mark.js或highlight.js。
安装mark.js：
npm install mark.js使用示例：
import Mark from 'mark.js'
export default {
mounted() {
const instance = new Mark(this.$refs.highlight)
instance.mark(this.keyword, {
className: 'highlight',
acrossElements: true
})
}
}CSS样式：
.highlight {
background-color: yellow;
font-weight: bold;
}动态高亮多个关键词
如果需要同时高亮多个关键词，可以扩展上述方法：
highlightMultiple() {
let result = this.originalText
this.keywords.forEach(keyword => {
result = result.replace(
new RegExp(keyword, 'g'),
`<span class="highlight">${keyword}</span>`
)
})
return result
}注意事项
- 使用v-html时要注意XSS攻击风险，确保内容来源可信
- 正则表达式匹配时考虑大小写敏感性问题
- 对于大量文本的高亮操作，注意性能优化
- 动态更新关键词时，需要重新触发高亮逻辑
以上方法可以根据具体需求选择使用，简单场景可以使用v-html或自定义指令，复杂场景推荐使用专门的库来实现更完善的功能。
