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: 键盘按 ...
随机推荐
- PCA主成分分析的Python实现
技术背景 PCA主成分分析在数据处理和降维中经常被使用到,是一个非常经典的降维算法,本文提供一个PCA降维的流程分解,和对应的Python代码实现. 二维数据生成 如果没有自己的测试数据,我们可以生成 ...
- 多线程编程入门Thread_Task_async_await简单秒懂
` using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; u ...
- 从底层源码深入分析Bean的实例化
生命周期的整体流程 Spring 容器可以管理 singleton 作用域 Bean 的生命周期,在此作用域下,Spring 能够精确地知道该 Bean 何时被创建,何时初始化完成,以及何时被销毁. ...
- IOS中的Context Menu
IOS中的Context Menu 通过长按组件或者3D touch方式,周边全部虚化,弹出一个可操作的菜单,并且菜单之间也可以嵌套 IOS13之后已经弃用UIViewControllerPrevie ...
- Flutter (2.5) - A splash screen was provided to Flutter, but this is deprecated
Flutter (2.5) - A splash screen was provided to Flutter, but this is deprecated 升级到Flutter 2.5 版本后,启 ...
- 使用 .NET 的 Dev Proxy 构建和测试弹性应用
使用 .NET 的 Dev Proxy 构建和测试弹性应用 https://devblogs.microsoft.com/dotnet/build-test-resilient-apps-dotnet ...
- 准备 OpenXML 开发环境
Development with Open XML 1. 准备开发环境 1.1 Open XML SDK 现在最新的 OpenXML SDK 版本是 2.12.1 (2021/1),需要通过 NuGe ...
- 【转载】 SpringBoot声明式事务的简单运用
https://blog.csdn.net/justry_deng/article/details/80828180 关于事物的基本概念等这里就不介绍了. Spring声明式事物的实现,有两种方式:第 ...
- linux命令系列 sudo apt-get update和upgrade的区别
入门linux的同志,刚开始最迫切想知道的,大概一个是中文输入法,另一个就是怎么安装软件.本文主要讲一下LINUX安装软件方面的特点.在windows下安装软件,我们只需要有EXE文件,然后双击,下一 ...
- JVM实战—2.JVM内存设置与对象分配流转
大纲 1.JVM内存划分的原理细节 2.对象在JVM内存中如何分配如何流转 3.部署线上系统时如何设置JVM内存大小 4.如何设置JVM堆内存大小 5.如何设置JVM栈内存与永久代大小 6.问题汇总 ...