小程序、uni-app 搜索内容高亮

最新推荐文章于 2024-04-23 13:57:03 发布
最新推荐文章于 2024-04-23 13:57:03 发布
阅读量273 收藏 1
点赞数 2
分类专栏： VUE 小程序 + uni-app 文章标签： 前端 vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42695298/article/details/118157312
版权
本文介绍了如何在小程序和uni-app中实现搜索内容的高亮显示。通过展示未高亮和高亮效果的对比，阐述了实现逻辑，包括使用正则表达式进行模糊查询，并给出了关键的HTML和JavaScript代码片段，特别是在JavaScript中处理高亮的部分。
摘要由CSDN通过智能技术生成

搜索结果展示高亮效果

效果图展示

未高亮效果

未高亮效果

高亮效果

在这里插入图片描述

实现逻辑

  • 展示数据
  • map + includes 过滤出符合条件的值
  • 过滤出来的值加样式，处理高亮
  • 需要正则匹配 模糊查询展示高亮
  • 正则表达式文档
    new RegExp(pattern, attributes) JavaScript RegExp 对象
  • replace() 方法用于在字符串中用一些字符替换另一些字符
    stringObject.replace(regexp/substr,replacement) replace() 方法

最低0.47元/天 解锁文章
学web的碎碎
关注
专栏目录
uni-app - 最新详细实现多选功能，点击项目时选中并高亮显示（支持全选 / 反选，以及轻松的 “回显“ 数据）点击选中并改变样式，全端兼容 H5 网页 安卓苹果App 小程序等（详细示例代码）
王佳斌
12-01 6437
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，多选，复选列表，多选列表，一键全选，一键反选，选中多个选项，并且使其高亮，取消选中，点击选中，多选选项，几个选项可点击多选，多选列表，多选标签，全选和反选，数据回显，能设置默认初始选中的多选，赋值默认数据让列表回显选中几个，列表点击选中并且高亮显示支持全选和反选，回显设置默认选择数据的功能，点击选中并改变样式，点击选中并高亮展示，复选框，胶囊椭圆形的多选，实现多选,点击选中并改变样式(可取消)，uni
uniapp使用picker-view组件实现选择器可进行搜索
热门推荐
qq_52065282的博客
03-15 1万+
效果图：1、使用uniapp自带的picker-view组件实现2、在父组件中使用。
uniapp 搜索内容高亮显示
weixin_40597855的博客
01-28 899
uniapp 搜索内容高亮显示 //html部分 <view v-for="(item, index) in leftList" > <u-parse :html="item.value,item.name | toRed" ></u-parse> </view> //item.value为搜搜的关键字，item.name为字符串内容 <script> filters:{ toRed:function(content,keyword)
uniapp 搜索内容关键字高亮
最新发布
qq_48354174的博客
04-23 770
uniapp 搜索内容关键字高亮
uni-app实现页面搜索高亮
weixin_45439379的博客
05-27 797
uni-app实现页面搜索高亮 文章目录uni-app实现页面搜索高亮前言一、效果二、上代码1.2.三、注意点四、总结 前言 uni-app + rich-text 实现页面搜索高亮 一、效果 上图： 二、上代码 1. 结构： <view class="info"> <rich-text class="name" :nodes="brightenKeyword('吴小莉',searchIptValue)"></rich-text> <view class="p
uniapp搜索出的文字高光并添加锚点
weixin_46381442的博客
08-18 332
uniapp搜索出的文字高光并添加锚点 步骤一： <u-search placeholder="请输入关键字" v-model="keyword" @search="searchVal" :show-action="false" shape="square" bg-color="#FFFFFF" border-color="#D7D7D7"></u-search> 在data里定义一个keyword 步骤二： <view class="adult_cont" v-html
uniapp微信小程序搜索关键词在列表中高亮效果
qq_45963071的博客
12-24 1415
先看效果图: 直接上代码: view片段: inputs是搜索关键词的值 <view class="text" @click="gsClick(item,index)" v-for="(item,index) in 16" :key="index"> <rich-text :nodes="`${this.brightKeyword('百度有限公司',inputs)}`"></rich-text> </view> input事件: /.
uni-app项目.zip uni-app的项目，未完成
01-05
uni-app是一个由ECharts团队开发的多端开发框架，允许开发者使用Vue.js语法编写一次代码，然后可以跨平台编译到iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序等多个平台。 描述中的"用来测试的...
uni-app的学习心得
x18275767219的博客
05-25 336
Node.js是我们运行uni-app项目必不可少的环境，而HBuilder X则是一个具有完整开发生态圈的开发工具，可以快速创建uni-app项目，并且提供完整的工程构建、代码高亮、代码补全、调试器、模拟器、正式版签名和打包等一系列功能。在uni-app中，已经预置了许多实用的组件和插件，它们的使用可以有效地提高我们开发的效率和质量，为我们提供了很大的便利。我也通过近期的学习，深刻感受到了uni-app的优越性能和方便的使用，下面我将分享一下我的uni-app学习心得。2.uni-app的环境搭建。
uni-app实现引导功能(拿来即用)
05-11
内容概要： 在网上找了好多资料，都没有找到一个模仿app操作指引的例子，于是自己封装了一个 实现思路： 使用id定位，找到对应的dom，然后再进行计算位置，设置显示样式。 适用人群： 1.会uniapp的程序员 使用...
uni-app 搜索内容高亮(源码分享)
qq_30856967的博客
09-28 391
https://blog.csdn.net/u013350495/article/details/105884069
搜索内容高亮显示
04-01
搜索栏输入文字后，在内容中高亮显示搜索文字demo
uniapp多组数组 搜索高亮效果demo（整理）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
01-10 644
uniapp多组数组 搜索高亮效果demo
JS搜索字符串，搜索到的字符串高亮处理（H5、uniapp）
随身笔记
05-24 620
【代码】JS搜索字符串，搜索到的字符串高亮处理（H5、uniapp）
Uniapp-（修改数组对象某个值、点击事件、计算属性、监听、深度监听）
H524268015wsw的博客
08-03 8801
监听很容理解，例如：你想知道狗子的生活状态，那你就监听它，这样你就可以得到想要的数据，在代码里的监听也是如此，监听data中的数据变化，想监听谁就吧它的键写在watch下。data里面是一组数据 ，我们要实现点击那组数据， 就得到那组数据 ，绑定给谁谁就生效，绑定完成点击事件需要在methods里定义。钥匙你想修改 复杂数据类型里的某个值，我们可以拿到想要修改值的索引，然后根据索引找想要修改的值就可以。用return动态的返回值，reduc方法中的acc是初始值，也就是末尾写的0，具体可以搜索相关知识。..
uni-app 关键字高亮
青衫折扇的博客
10-23 2392
这里直接上代码了，备注都在代码里 <template> <rich-text :nodes="html"></rich-text> </template> <script> export default { props: { content: { // 需要高亮的内容 type: String, default: '' }, keys: { // 高亮的关键字，多个用 | 隔开 type: S
uni-app 搜索内容高亮（源码分享）
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
05-01 4534
在列表中将搜索的内容过滤显示并给搜索的关键字增加高亮效果是常见的需求。 效果图： 已过滤和高亮后 已过滤和高亮后 源码： <template> <view> <view class="search"> <input type="text" placeholder="请输入搜索内容" @input="set"&...
uni-app微信小程序——实现搜索关键字高亮
weixin_40677985的博客
08-27 5718
一、实现功能： 通过搜索框搜索关键字，将搜索得到的结果里包含关键字的字体实现高亮的效果 二、实现思路： 使用js的indexof()方法检验是否包含某字符串，以及unshift() 方法可向数组的开头添加元素，新加一个key属性，将含有关键字的那部分字符串的key属性标记为true，其他均为false 三、核心代码： tips：使用uni-app框架，使用原生的朋友请自行修改对应的代码即...
uniapp搜索关键字高亮
沛沛呀、
04-13 1757
//显示部分使用rich-text <template> <view> <view class="list-con"> <view v-for="(item,index) in fuzzyAreaArr" :key="index" class="list-item"> <rich-text :nodes="item.fuzzystr"></rich-text> </view> </vie
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值