在开发中,遇到需要将文本中包含的关键字高亮的情况,可以做以下处理。
<div class="title"v-html="highlightKeywords(item.title, state1.tags1.concat(state2.tags2).concat(state3.tags3))">
</div>
......
......
const highlightKeywords = (text, keywords) => {if (!text || !keywords.length) return text;const regex = new RegExp(keywords.map(keyword => `(${keyword})`).join('|'), 'gi');return text.replace(regex, (match) => `<span style="color: red;">${match}</span>`);
};