此案例在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中的模糊搜索( 正则表达式)的更多相关文章

  1. js中几个正则表达式相关函数使用时g标志的作用

    首先,javascript中涉及到正则表达式的函数总共有6个,可分为两种: 1.第一种是作为字符串对象的方法,即以 String.fun(); 形式调用,这里包括 split.search.match ...

  2. [JavaScript] js中全局标识正则表达式的lastIndex属性

    在JavaScript中使用正则表达式时,遇到一个坑:第一次匹配是true,第二次匹配是false. 因为在带全局标识"g"的正则表达式对象中,才有“lastIndex” 属性,该 ...

  3. js中常用的正则表达式

    我一般对正则的使用方式如下,该方法会返回一个boolean值,然后对这个返回值来进行判断 // 判断是否是整数 function isInt(num) { var reg = new RegExp(& ...

  4. js中字符串支持正则表达式的方法

    设一个字符串var myName = "fangming";则支持正则表达式的方法有:split(分割),replace(替换),search(查找),match(元素参数的数组) ...

  5. js 中常用的正则表达式

    主要有以下几种: 匹配中文字符的正则表达式: [\u4e00-\u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了哦 获取日期正则表达式:\d{4}[年|\-|\.]\d{1,2}[ ...

  6. js中常用的正则表达式总结

    去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/g,"") ...

  7. RegExp正则表达式(三)–js中正则表达式的定义

    在js中,RegExp正则表达式的定义有两种方式:一种是普通方式,另一种是构造函数方式.无论是那种定义正则表达式的方式,它们都会返回RegExp对象. 普通方式定义正则表达式的格式 语法: var 变 ...

  8. 二、js中基础知识

    该篇文章主要是强化一下自己javaScript的基础,让写代码变得更轻松些.基础好的请忽略.    JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解 ...

  9. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  10. js中的事件,内置对象,正则表达式

    [JS中的事件分类] 1.鼠标事件: click/dbclick/mouseover/mouseout/mousemove/mousedown/mouseup 2.键盘事件: keydown: 键盘按 ...

随机推荐

  1. 【Amadeus原创】Docker安装Nginx,并配置端口转发,配置SSL

    1,docker安装Nginx [root@hecs-29489 ~]# docker pull nginx Using default tag: latest latest: Pulling fro ...

  2. 【机器学习】SVM(支持向量机)算法实验

    (一)实验名称:SVM(支持向量机)算法实验 (二)实验目的: 学习支持向量机SVM的基本概念 了解核函数的基本概念 掌握使用scikit-learn API函数实现SVM算法 (三)实验内容:使用s ...

  3. mongo docker compose

    49dSsULIAv6NiP8hdqqbapRTHVx9BRYU4VVakN9A4FJWV0KufqEm/UoTUvn9Z4eg FRP7iHXF6Qiou5MK2Ak76zRBU7MOIVCl0DI ...

  4. 带宽计算-大B和小B的区别

    在计算机网络.IDC机房中,其宽带速率的单位用bps(或b/s)表示:换算关系为:1Byte=8bit 1B=8b    ---- 1B/s=8b/s(或1Bps=8bps) 1KB=1024B    ...

  5. Qt音视频开发08-ffmpeg内核优化(极速打开/超时回调/实时响应)

    一.前言 最初编写这套视频解析组件的时候,面对的场景是视频监控行业,对应设备都是网络监控摄像机,传过来的都是rtsp这种视频流,做过这一块的人都知道,打开某个视频流默认耗时比较大,基本上在2s左右,那 ...

  6. Qt编写linux上视频流播放器(支持海康大华宇视等各种网络摄像机)

    一.前言 在windows上的视频流播放器有很多,而且各个监控厂家无论大厂还是小厂,基本上都提供了客户端,甚至很多第三方的监控平台软件厂商,也都提供了windows的版本,基本的都没有提供linux版 ...

  7. 微信团队分享:详解iOS版微信视频号直播中因帧率异常导致的功耗问题

    本文由微信客户端团队rhythm分享,原题"视频号直播:如何进一步降低功耗占用?",本文有修订和改动. 1.引言 功耗优化一直是 app 性能优化中让人头疼的问题,尤其是在直播这种 ...

  8. Pytorch Utils 总结

    Utils 从torch.nn.utils模块 clip_grad_norm_ 裁剪参数迭代的梯度范数. clip_grad_value_ 在指定值处剪辑可迭代参数的梯度. parameters_to ...

  9. CDS标准视图:设备功能位置变更历史 I_EQUIPINSTALLATIONHISTORYC

    视图名称:I_EQUIPINSTALLATIONHISTORYC 视图类型:基础视图 视图代码: 点击查看代码 @EndUserText.label: 'Equipment Installation ...

  10. biancheng-Spring MVC-HandlerMapping

    一.HandlerMapping 作用是根据当前请求的找到对应的 Handler,并将 Handler(执行程序)与一堆 HandlerInterceptor(拦截器)封装到 HandlerExecu ...