Vue 3 实现关键字高亮显示的代码示例

作者：青山有信

时间：2026-10-31

本文介绍如何在 Vue 3 结合 TypeScript 的环境中实现类似搜索引擎的关键字高亮功能。通过定义正则表达式匹配输入内容，利用 replace 方法将匹配到的文本包裹在带有特定 class 的 span 标签中，并结合 v-html 渲染及 CSS 样式设置，最终实现文字高亮显示效果。

文章目录

功能概述

该功能旨在实现类似搜索引擎的交互效果：当用户输入关键词进行搜索时，结果中与关键词完全匹配的文字会显示为红色。此功能逻辑相对简单，主要用于演示核心实现思路。

开发环境

开发环境说明

本示例基于 Vue 3 配合 TypeScript 语法进行开发。实际上，核心逻辑仅涉及一个方法调用，使用纯 JavaScript 或 TypeScript 均可实现，关键在于正确调用该方法。

<template>
  <div class="ed-con">
    <el-input v-model="input" style="width: 240px" placeholder="Please input"/>
    <p v-html="txt"></p>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';

const input = ref('');

const txt = ref('在古老的小镇边缘，有一间被岁月温柔抚摸过的木屋，它静静地伫立在一片绚烂的野花丛中。屋内，住着一位名叫苏婉的女子，她拥有一双能洞察人心的眼睛和一头如夜色般深邃的长发。每天黄昏，苏婉都会坐在窗边，手捧一本泛黄的书，眼神时而凝重，时而温柔，仿佛在与书中人物进行着跨越时空的对话。\n' +
    '\n' +
    '某天，一阵突如其来的风雨打破了小镇的宁静，也吹散了苏婉心中的平静。一位浑身湿透的青年男子闯入了她的世界，带着一身未解之谜。苏婉望着他，眼中闪过一抹不易察觉的光芒，她知道，自己的生活从此将不再平凡。两人在雨后的木屋里，围绕着炉火，开始编织起一段关于寻找、救赎与爱的故事，而窗外的世界，正悄悄地为这段奇遇添上一抹神秘的色彩。')

</script>

<style scoped lang="scss">
.ed-con {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;

  ::v-deep(.ed-highlight) {
    color: red;
  }
}
</style>

运行效果

上述代码运行后的界面效果如下所示：

功能概述

核心实现逻辑

接下来介绍具体实现逻辑：当用户在输入框中输入数据后，如何使下方文字中与关键字相同的部分高亮显示为红色。实现过程非常简洁，仅需编写一个处理函数：

const highlightText = () => {
  if (!input.value) {
    return txt.value;
  }
  const regex = new RegExp(`(${input.value})`, 'gi');
  const highlightedText = txt.value.replace(regex, '<span class="ed-highlight">$1</span>');
  return highlightedText;
}