当前位置：首页 > VUE

vue实现检索内容标记

2026-02-09 14:31:55VUE

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>

优势：

vue实现检索内容标记

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

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

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

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

在 Vue 中使用：

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>`

标签: 标记内容

分享给朋友：

vue实现内容定位

内容定位的实现方法在Vue中实现内容定位通常涉及滚动到页面特定位置或锚点跳转，以下是几种常见实现方式：使用HTML锚点通过<a>标签的href属性直接跳转到页面内指定ID的元素：…

js实现内容滚动

实现内容滚动的方法使用 scrollTo 方法通过 window.scrollTo 或 element.scrollTo 实现滚动到指定位置。支持平滑滚动（smooth behavior）或瞬间跳…

js实现内容切换

使用innerHTML切换内容通过修改DOM元素的innerHTML属性实现内容切换。这种方法适合简单的文本或HTML片段替换。 const element = document.getEleme…

jquery追加内容

使用 append() 方法追加内容 append() 方法将内容插入到目标元素的内部末尾。适用于动态添加列表项、表格行等场景。 $("#targetElement").append("<…

jquery获取div内容

jQuery获取div内容的方法使用jQuery获取div内容可以通过多种方式实现，具体取决于需求是获取纯文本、HTML内容还是特定属性的值。获取div的文本内容使用.text()方法可以获取…

uniapp 内容列表

uniapp 内容列表的实现方法在 uniapp 中实现内容列表可以通过多种方式完成，以下是几种常见的方法：使用 scroll-view 组件 scroll-view 组件适合需要滚动展示的列…

vue实现检索内容标记