【uniapp】vue2 搜索文字高亮显示

【uniapp】vue2 搜索文字高亮显示

我这里是把方法放在公共组件中使用

javascript 复制代码
props: {
    // 帖子list
    postList: {
		type: Array,
		required: true
    },
    // 搜索文本字体高亮
    highLightSearch: {
		type: String,
		required: false
    }
},
watch: {
    // 监听 props 的变化
     postList: {
       immediate: true,
         handler(newVal) {
					// 变化后的新值, 当前的高亮搜索词
            this.updateHighlightedPostList(newVal, this.highLightSearch);
         },
      },
},
methods: {
   updateHighlightedPostList(postList, searchKeyword) {
       // 检查是否有搜索关键字
	   if (!searchKeyword) {
		this.highlightedPostList = [...postList]
		return
       }
       // 创建正则表达式匹配关键字(g 全局匹配,i 不区分大小写)
       const regex = new RegExp(`(${searchKeyword})`, "gi");
       // 更新高亮内容
       this.highlightedPostList = postList.map((item) => ({
          ...item,
          title: item.title.replace(
             regex,
             `<text class="hight_blue">$1</text>` // 将匹配到的内容 ($1) 包裹在 <text> 标签中
          ),
       }));
   },
}
html 复制代码
<view v-for="p in highlightedPostList" :key="p.id">
    <!-- 页面文字展示一定要用 v-html 便于解析标签样式 -->
    <view v-html="p.title" class=""></view>
</view>

高亮实现方式是用 HTML 标签包裹匹配文本,通过 CSS 控制样式

注意事项:

使用 v-html 显示 title 时要小心 XSS 攻击,确保 searchKeyword 是可信的

如果 postList 很大,频繁更新可能影响性能,可以考虑防抖

正则表达式中的特殊字符可能需要转义

相关推荐
草莓熊Lotso10 分钟前
C++ 方向 Web 自动化测试入门指南:从概念到 Selenium 实战
前端·c++·python·selenium
Olrookie23 分钟前
若依前后端分离版学习笔记(二十)——实现滑块验证码(vue3)
java·前端·笔记·后端·学习·vue·ruoyi
533_1 小时前
[vue] dayjs 显示实时时间
前端·javascript·vue.js
lpfasd1231 小时前
第2部分:Netty核心架构与原理解析
运维·服务器·架构
倚栏听风雨1 小时前
java.lang.SecurityException异常
java
若尘拂风1 小时前
centos 7.9 编译安装 freeswitch 1.10.12
服务器·udp·freeswitch·sip
星河队长1 小时前
VS创建C++动态库和C#访问过程
java·c++·c#
故事与他6451 小时前
XSS_and_Mysql_file靶场攻略
前端·学习方法·xss
小蜜蜂爱编程1 小时前
gerrit的部署与配置关联到不同服务器上的git仓库
运维·服务器·git·gerrit
鼠鼠我捏,要死了捏2 小时前
Java虚拟线程原理与性能优化实战
java·performance-optimization·virtual-thread