Vue3 搜索关键词高亮组件｜零依赖可复用，防 XSS + 多关键词兼容，纯原生封装，新手复制即用（适配全场景）

前端开发中，搜索关键词高亮几乎是刚需需求，但自己手写总踩坑：

• 多关键词不生效、空格分隔没反应；
• 特殊字符炸正则、页面直接报错；
• 用 v-html 有 XSS 注入风险；
• 样式写死、复用性差、每次都重复造轮子。

今天给大家带来一个 Vue3 纯原生可复用高亮组件，零第三方依赖、组合式 API 写法、自带安全防护，新手复制粘贴就能用，后台管理、文章搜索、日志标记全场景适配✨

一、组件核心能力（开箱即用）

这个高亮组件一次性解决所有痛点，功能拉满：

1. 多关键词支持：空格分隔多个词，自动去重不重复渲染；
2. 安全防 XSS：内置 HTML 转义，杜绝脚本注入，生产环境放心用；
3. 正则鲁棒：自动转义 ./*+?$ 等特殊字符，不报错；
4. 样式自定义：支持传类名覆盖，高亮颜色 / 背景随便改；
5. 边界兼容：无关键词、空文本、undefined 自动处理；
6. 轻量无依赖：纯 Vue3 实现，不引入任何库，打包体积极小。

二、完整组件源码（直接复制）

新建文件 HighlightText.vue，全量代码如下，注释超详细：

<template>
  <!-- 高亮文本外层容器 -->
  <span class="highlight-text" v-html="highlightContent"></span>
</template>

<script setup>
import { computed } from 'vue'

// 组件参数定义
const props = defineProps({
  // 原始文本内容
  content: {
    type: String,
    default: ''
  },
  // 搜索关键词（多个用空格分隔）
  keyword: {
    type: String,
    default: ''
  },
  // 自定义高亮类名
  highlightClass: {
    type: String,
    default: 'highlight-keyword'
  }
})

// 计算属性：生成高亮文本
const highlightContent = computed(() => {
  const { content, keyword, highlightClass } = props
  // 无内容/无关键词直接返回安全文本
  if (!content || !keyword) return escapeHtml(content)

  // 1. 关键词处理：去重+过滤空字符串
  const keywordList = [...new Set(keyword.split(' ').filter(k => k.trim()))]
  if (keywordList.length === 0) return escapeHtml(content)

  // 2. 转义正则特殊字符，防止报错
  const escapedKeywords = keywordList.map(k =>
    k.replace(/[.*+?^${}()|[]\]/g, '\$&')
  )

  // 3. 构建正则：全局匹配+大小写不敏感
  const reg = new RegExp(`(${escapedKeywords.join('|')})`, 'gi')

  // 4. 安全替换并渲染
  const safeContent = escapeHtml(content)
  return safeContent.replace(reg, `<span class="${highlightClass}">$1</span>`)
})

// XSS 安全转义函数（核心防护）
function escapeHtml(str) {
  if (!str) return ''
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#039;')
}
</script>

<style scoped>
.highlight-text {
  word-break: break-all;
}
/* 默认高亮样式（可修改） */
:global(.highlight-keyword) {
  color: #ff4d4f;
  font-weight: 500;
  background: #fff2f0;
  padding: 0 2px;
  border-radius: 2px;
}
</style>

三、2 种引入方式（5 秒上手）

1. 局部引入（推荐）

<template>
  <div class="search-page">
    <input v-model="searchKey" placeholder="输入关键词搜索" />
    <div class="result">
      <!-- 直接使用组件 -->
      <HighlightText :content="demoText" :keyword="searchKey" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// 引入组件
import HighlightText from './components/HighlightText.vue'

// 搜索关键词
const searchKey = ref('')
// 演示文本
const demoText = ref('Vue3 是一款优秀的前端框架，Vue3 组合式 API 让代码更清晰，Vue3 生态丰富易扩展！')
</script>

2. 全局注册（全项目可用）

在 main.js 中配置：

import { createApp } from 'vue'
import App from './App.vue'
import HighlightText from './components/HighlightText.vue'

const app = createApp(App)
// 全局注册组件
app.component('HighlightText', HighlightText)
app.mount('#app')

四、自定义高亮样式（轻松换肤）

不想用默认红色？只需两步，快速修改高亮效果：

1. 传入自定义类名

   <HighlightText
     :content="demoText"
     :keyword="searchKey"
     highlight-class="my-highlight"
   />
   

2. 编写样式

   :global(.my-highlight) {
     color: #1890ff;
     background: #e6f7ff;
     font-weight: bold;
     border-radius: 4px;
   }
   

五、适用场景全覆盖

这个组件几乎能用于所有文本高亮场景：

• 文章 / 博客搜索结果页；
• 后台管理系统表格搜索高亮；
• 系统日志关键词标记；
• 聊天记录关键词高亮；
• 任何需要文本标记关键词的前端页面。

六、组件核心亮点总结

1. 安全第一：内置 XSS 过滤，v-html 渲染无风险；
2. 智能匹配：多关键词、自动去重、大小写不敏感、特殊字符兼容；
3. 极致复用：封装成独立组件，局部 / 全局引入都方便；
4. 生产可用：无依赖、轻量稳定、新手也能快速修改。

结尾

这个 Vue3 搜索高亮组件，从实际开发需求出发，避开所有常见坑，兼顾易用性、安全性、复用性，代码简洁易懂，适合 Vue3 初学者学习，也能直接用于企业项目。

文章来源公众号：AI 懒人码农，作者 JackChen007

以上关于Vue3 搜索关键词高亮组件｜零依赖可复用，防 XSS + 多关键词兼容，纯原生封装，新手复制即用（适配全场景）的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。