当前位置：首页 > VUE

vue实现文本标记

2026-01-17 03:08:44VUE

Vue 实现文本标记的方法

在 Vue 中实现文本标记功能，可以通过以下几种方式实现，具体取决于需求场景（如高亮关键词、添加样式标记等）。

使用 `v-html` 动态渲染带标记的文本

通过字符串替换或正则表达式将目标文本中的关键词替换为带有 HTML 标签的文本，再通过 v-html 渲染。

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

<script>
export default {
  data() {
    return {
      originalText: "这是一段需要标记关键词的文本，关键词是Vue。",
      keyword: "Vue"
    };
  },
  computed: {
    markedText() {
      return this.originalText.replace(
        new RegExp(this.keyword, "g"),
        "<span style='background-color: yellow;'>$&</span>"
      );
    }
  }
};
</script>

注意：v-html 有 XSS 风险，需确保内容来源可信。

使用自定义指令实现标记

通过自定义指令动态操作 DOM，标记文本中的特定内容。

<template>
  <div v-mark="keyword">{{ originalText }}</div>
</template>

<script>
export default {
  data() {
    return {
      originalText: "这是一段需要标记关键词的文本，关键词是Vue。",
      keyword: "Vue"
    };
  },
  directives: {
    mark: {
      inserted(el, binding) {
        const text = el.textContent;
        const markedText = text.replace(
          new RegExp(binding.value, "g"),
          `<span style="color: red;">${binding.value}</span>`
        );
        el.innerHTML = markedText;
      }
    }
  }
};
</script>

结合 `computed` 和组件拆分

将文本拆分为数组，通过计算属性标记关键词后循环渲染。

<template>
  <div>
    <span v-for="(part, index) in markedParts" :key="index" :style="part.marked ? 'font-weight: bold;' : ''">
      {{ part.text }}
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalText: "这是一段需要标记关键词的文本，关键词是Vue。",
      keyword: "Vue"
    };
  },
  computed: {
    markedParts() {
      const regex = new RegExp(`(${this.keyword})`, "g");
      return this.originalText.split(regex).map(text => ({
        text,
        marked: text === this.keyword
      }));
    }
  }
};
</script>

使用第三方库（如 `mark.js`）

集成专用文本标记库，实现更复杂的高亮功能。

安装 mark.js：
```
npm install mark.js
```

在 Vue 中使用：


<template>
<div ref="markContainer">{{ originalText }}</div>
</template>

import Mark from "mark.js"; export default { data() { return { originalText: "这是一段需要标记关键词的文本，关键词是Vue。", keyword: "Vue" }; }, mounted() { const markInstance = new Mark(this.$refs.markContainer); markInstance.mark(this.keyword, { className: "highlight", acrossElements: true }); } }; .highlight { background-color: #ffeb3b; } ```