Vue3实现表格搜索内容高亮

采用html拼接

v-html 指令用来将给定的 HTML 字符串直接渲染到页面上

javascript 复制代码
<template>
  <div>
    <!-- 搜索框 -->
    <input v-model="searchText" placeholder="搜索内容" />

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%" @row-click="handleRowClick">
      <el-table-column label="Content" prop="content">
        <template #default="{ row }">
          <!-- 使用 v-html 渲染含有高亮部分的 HTML -->
          <span v-html="getHighlightedContent(row.content)"></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

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

  // 响应式数据
  const searchText = ref('');
  const tableData = ref([
    { id: 1, content: '创建人:李四<br>创建时间:2025-01-11 10:24:00<br>' },
    { id: 2, content: '创建人:张三<br>创建时间:2025-01-12 11:25:00<br>' },
  ]);

  // 根据搜索文本匹配并返回高亮内容
  function getHighlightedContent(content: string) {
    if (!searchText.value) {
      return content; // 如果没有输入搜索文本,直接返回原内容
    }

    const regex = new RegExp(`(${escapeRegExp(searchText.value)})`, 'gi');
    let highlightedContent = content.replace(regex, '<span style="color: rgb(109,172,246); font-weight: bold;">\$1</span>');

    return highlightedContent;
  }

  // 用来转义搜索文本中的特殊字符,避免正则错误
  function escapeRegExp(string: string) {
    return string.replace(/[.*+?^=!:${}()|\[\]\/\\]/g, '\\$&');
  }
</script>

<style scoped>
  /* 你可以根据需要添加其他样式 */
</style>
(1)getHighlightedContent 函数
javascript 复制代码
function getHighlightedContent(content: string) {
  if (!searchText.value) {
    return content; // 如果没有输入搜索文本,直接返回原内容
  }

  const regex = new RegExp(`(${escapeRegExp(searchText.value)})`, 'gi');
  let highlightedContent = content.replace(regex, '<span style="color: rgb(109,172,246); font-weight: bold;">\\$1</span>');

  return highlightedContent;
}
  • 这个函数接收一个字符串 content,并根据 searchText 中的文本进行高亮显示。
  • 步骤
    • 如果 searchText 为空,直接返回原内容。
    • 创建一个正则表达式,用于匹配 searchText 中的所有文本(不区分大小写)。
    • 使用 content.replace() 方法,找到所有匹配的文本并用 <span> 标签包裹,同时设置样式(字体加粗,颜色改变)。
    • 返回高亮后的 HTML 字符串。
(2)escapeRegExp 函数
javascript 复制代码
function getHighlightedContent(content: string) {
  if (!searchText.value) {
    return content; // 如果没有输入搜索文本,直接返回原内容
  }

  const regex = new RegExp(`(${escapeRegExp(searchText.value)})`, 'gi');
  let highlightedContent = content.replace(regex, '<span style="color: rgb(109,172,246); font-weight: bold;">\\$1</span>');

  return highlightedContent;
}
  • 这个函数用于转义 searchText 中的特殊字符,避免它们在构建正则表达式时引起错误。
  • 正则表达式中的一些字符(如 .*? 等)具有特殊含义,因此需要通过 escapeRegExp 函数将它们转义,以确保它们能被正确地作为普通字符匹配。
相关推荐
qq_124987075327 分钟前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
袁煦丞1 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
科兴第一吴彦祖1 小时前
在线会议系统是一个基于Vue3 + Spring Boot的现代化在线会议管理平台,集成了视频会议、实时聊天、AI智能助手等多项先进技术。
java·vue.js·人工智能·spring boot·推荐算法
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭1 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育2 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo2 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
yinuo2 小时前
Uni-App跨端实战:支付宝小程序WebView与H5通信全流程解析(02)
前端
木心操作3 小时前
js生成excel表格进阶版
开发语言·javascript·ecmascript
GISer_Jing3 小时前
sqb&ks二面(准备)
前端·javascript·面试