js中的模糊搜索( 正则表达式)
此案例在vue中实现
搜索设备ID示例
<input
type="text"
name=""
placeholder="搜索设备ID"
v-model="searchData"
@input="search()" />
search() {
if (this.searchData != '') {
this.isSearch = true //当用户有输入时,显示搜索结果组件
} else {
this.isSearch = false
}
let data = []
if (this.deviceList.length != 0 && this.searchData) {
//当设备列表不为空且用户有输入时
let str = `\S*${this.searchData}\S*`
let reg = new RegExp(str)
this.deviceList.map((item) => {
if (reg.test(item.nDeviceID)) {
data.push(item)
}
})
//使用正则和map方法,遍历数组对象,将匹配项push到新数组中
}
//渲染新数组
this.searchRes = data
}
js中的模糊搜索( 正则表达式)的更多相关文章
- js中几个正则表达式相关函数使用时g标志的作用
首先,javascript中涉及到正则表达式的函数总共有6个,可分为两种: 1.第一种是作为字符串对象的方法,即以 String.fun(); 形式调用,这里包括 split.search.match ...
- [JavaScript] js中全局标识正则表达式的lastIndex属性
在JavaScript中使用正则表达式时,遇到一个坑:第一次匹配是true,第二次匹配是false. 因为在带全局标识"g"的正则表达式对象中,才有“lastIndex” 属性,该 ...
- js中常用的正则表达式
我一般对正则的使用方式如下,该方法会返回一个boolean值,然后对这个返回值来进行判断 // 判断是否是整数 function isInt(num) { var reg = new RegExp(& ...
- js中字符串支持正则表达式的方法
设一个字符串var myName = "fangming";则支持正则表达式的方法有:split(分割),replace(替换),search(查找),match(元素参数的数组) ...
- js 中常用的正则表达式
主要有以下几种: 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了哦 获取日期正则表达式:\d{4}[年|\-|\.]\d{1,2}[ ...
- js中常用的正则表达式总结
去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/g,"") ...
- RegExp正则表达式(三)–js中正则表达式的定义
在js中,RegExp正则表达式的定义有两种方式:一种是普通方式,另一种是构造函数方式.无论是那种定义正则表达式的方式,它们都会返回RegExp对象. 普通方式定义正则表达式的格式 语法: var 变 ...
- 二、js中基础知识
该篇文章主要是强化一下自己javaScript的基础,让写代码变得更轻松些.基础好的请忽略. JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解 ...
- JS中给正则表达式加变量
前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下. 一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...
- js中的事件,内置对象,正则表达式
[JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...
随机推荐
- uniapp 画布
1.前言 uniapp中的canvas与HTML中的canvas用法并不同,他的使用文档请参考微信小程序画布 2.基本使用 1.准备canvas容器,并为其设置canvas-id和宽高(为了兼容H5, ...
- IO介绍-下
中断 由外部设备引起的中断,称为外中断. 由内部错误引起的中断,称为内中断,或者是陷入.例如:非法指令,地址越界,电源故障等. 中断向量表 中断优先级 多中断源的处理方式 屏蔽中断 嵌套中断 根据 ...
- 服务拆分之《阿里云OCR使用指南》
在做一件什么事情: 遇到了什么问题: 问题分析: 业界解决方案: 我的方案: 最终的结果: 服务都已经迁移过来了,对应的那些使用的工具什么的也都得换成自己的账号.起初原始用的是什么忘记了,时间太长了已 ...
- NATS: 请求-响应消息
请求-回复消息 https://docs.nats.io/nats-concepts/core-nats/reqreply 请求-回复 在分布式系统中,请求-回复是一种常见的模式.发送请求之后,应用程 ...
- Elm 和 Jetpack Compose 殊途同归及 MVVM 缺点分析
Html.lazy · An Introduction to Elm 可能搞 vdom 的都会到 lazy renderer 这一步,react 可能也可以这么搞或者已经这么搞了我不知道,Elm 提到 ...
- 【Mybatis】学习笔记02:实现简单的查
Mybatis02:简单的查 如果你没先去学 增删改 ,然后直接看这篇记录,我想会有些困难.因为该文写的很粗劣,只是简单的截图.所以没基础的建议先去看 [Mybatis]学习笔记01:连接数据库,实现 ...
- 利用H2的自定义函数更好的支持测试
在写DAO层的单元测试时,用mock的写法意义不大,因为DAO层的测试更多的关注是Java对象的传递和生成SQL的正确性,所以需要链接真实的数据库. 但是对于单元测试,真实的数据库是很重的,还要依赖于 ...
- P10952 聚会 题解
题目链接 题目大意 对于一棵树,求出一个点对于给定的三个点(以下简称 $x$,$y$,$z$ 且可以重复)距离最短. 题解 对于点的距离,不难想到 LCA 处理.而对于本题,则有两种情况. 第一问 三 ...
- 基于极坐标参数方程的直线Hough变换
- Abp vNext 扩展属性
扩展属性 我们发现abp的默认都会有一个ExtraProperties属性,那么他的作用是什么呢?当我们使用abp的时候,需要对其原有的表进行扩展或者添加我们想要的字段,又不想改源码,以最小的方式实现 ...