vue实现检索内容标记

Vue 实现检索内容标记的方法

在 Vue 中实现检索内容标记功能，可以通过以下步骤完成。核心思路是利用正则表达式匹配检索关键词，并使用 v-html 或自定义指令动态渲染高亮内容。

方法一：使用 v-html 和正则表达式

通过正则替换匹配的关键词，生成带高亮样式的 HTML 字符串，并用 v-html 渲染。

<template>
  <div>
    <input v-model="searchText" placeholder="输入关键词" />
    <div v-html="highlightedContent"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "这是一段需要标记的文本内容，包含关键词和其他信息。",
      searchText: "",
    };
  },
  computed: {
    highlightedContent() {
      if (!this.searchText) return this.content;
      const regex = new RegExp(this.searchText, "gi");
      return this.content.replace(
        regex,
        (match) => `<span style="background-color: yellow">${match}</span>`
      );
    },
  },
};
</script>

注意事项：

• 使用 v-html 时需注意 XSS 风险，确保内容来源可信。
• 正则表达式需处理特殊字符（如 *, ?），可通过转义实现：

const escapedText = this.searchText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const regex = new RegExp(escapedText, 'gi');

方法二：自定义指令实现高亮

通过自定义指令动态处理 DOM 节点，避免直接使用 v-html。

<template>
  <div>
    <input v-model="searchText" placeholder="输入关键词" />
    <div v-highlight="searchText">{{ content }}</div>
  </div>
</template>

<script>
export default {
  directives: {
    highlight: {
      updated(el, binding) {
        const text = el.textContent;
        const searchText = binding.value;
        if (!searchText) {
          el.innerHTML = text;
          return;
        }
        const regex = new RegExp(searchText, 'gi');
        el.innerHTML = text.replace(
          regex,
          (match) => `<span style="background-color: yellow">${match}</span>`
        );
      },
    },
  },
  data() {
    return {
      content: "这是一段需要标记的文本内容，包含关键词和其他信息。",
      searchText: "",
    };
  },
};
</script>

优势：

• 指令可复用，逻辑与组件解耦。
• 避免直接操作 HTML，安全性更高。

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

对于复杂场景（如多关键词、跨元素标记），可使用专用库。

1. 安装 mark.js：

   npm install mark.js

2. 在 Vue 中使用：

   
   <template>
   <div>
    <input v-model="searchText" placeholder="输入关键词" />
    <div ref="content">{{ content }}</div>
   </div>
   </template>

import Mark from 'mark.js'; export default { data() { return { content: "这是一段需要标记的文本内容，包含关键词和其他信息。", searchText: "", }; }, watch: { searchText(newVal) { const marker = new Mark(this.$refs.content); marker.unmark(); if (newVal) marker.mark(newVal); }, }, }; ```

特点：

• 支持动态标记/取消标记。
• 提供配置项（如高亮样式、精准匹配等）。

样式优化建议

为高亮内容添加 CSS 类，避免内联样式：

.highlight {
  background-color: yellow;
  font-weight: bold;
}

在替换逻辑中使用类名替代内联样式：

`<span class="highlight">${match}</span>`