vue 按标签高亮文本

要实现在Vue中按标签高亮文本，可以使用Vue的计算属性和v-html指令。

首先，需要在Vue组件的数据中定义一个包含文本的字符串，例如：

data() {
  return {
    text: '<p>Lorem ipsum dolor <span class="highlight">sit amet</span>, consectetur adipiscing elit.</p>',
  };
},

然后，可以创建一个计算属性来处理文本，将指定的标签高亮，例如：

computed: {
  highlightedText() {
    const highlighted = this.text.replace(/<span class="highlight">|<\/span>/g, ''); // 移除之前的高亮标签
    return highlighted.replace(/<([^>]+)>/g, (match, tag) => {
      return `<span class="highlight">${tag}</span>`; // 将指定标签用高亮的span标签包裹
    });
  },
},

最后，在模板中使用v-html指令将计算属性的值渲染到页面上，例如：

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

这样就可以实现按标签高亮文本的效果，其中匹配的标签会被包裹在带有class="highlight"的span标签中，从而实现高亮显示。