vue实现检索内容标记
Vue 实现检索内容标记的方法
使用 v-html 和字符串替换
通过检索关键词，在文本中使用字符串替换方法添加标记标签（如 <span class="highlight">），结合 Vue 的 v-html 指令渲染带标记的内容。
<template>
<div v-html="highlightedText"></div>
</template>
<script>
export default {
data() {
return {
originalText: '这里是需要检索的原始文本内容',
searchKeyword: '检索'
};
},
computed: {
highlightedText() {
const regex = new RegExp(this.searchKeyword, 'gi');
return this.originalText.replace(
regex,
match => `<span class="highlight">${match}</span>`
);
}
}
};
</script>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>使用自定义指令
创建一个自定义指令 v-highlight，自动处理文本标记逻辑，提高代码复用性。
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 class="highlight">${match}</span>`
);
}
});<template>
<div v-highlight="searchKeyword">{{ originalText }}</div>
</template>处理多关键词标记
支持同时标记多个关键词，通过数组传递关键词并循环处理。
computed: {
highlightedText() {
let result = this.originalText;
this.keywords.forEach(keyword => {
const regex = new RegExp(keyword, 'gi');
result = result.replace(
regex,
match => `<span class="highlight">${match}</span>`
);
});
return result;
}
}使用第三方库
考虑使用专门的高亮库如 mark.js，集成到 Vue 项目中实现更复杂的高亮效果。
import Mark from 'mark.js';
export default {
methods: {
highlightText() {
const marker = new Mark(document.getElementById('content'));
marker.mark(this.searchKeyword, {
className: 'highlight'
});
}
},
mounted() {
this.highlightText();
}
};性能优化建议
对于大文本内容，使用防抖（debounce）技术延迟高亮操作，避免频繁重绘影响性能。
import { debounce } from 'lodash';
export default {
methods: {
highlightText: debounce(function() {
// 高亮逻辑
}, 300)
}
};以上方法可根据具体需求选择或组合使用，实现灵活高效的检索内容标记功能。
