此案例在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. 推荐7个最强Appium替代工具,移动App自动化测试必备!

    在移动应用开发日益火爆的今天,自动化测试成为了确保应用质量和用户体验的关键环节.Appium 作为一款广泛应用的移动应用自动化测试工具,为测试人员所熟知.然而,在不同的测试场景和需求下,还有许多其他优 ...

  2. Fiddler抓包iOS手机配置全流程

    前情 平时做移动移动端开必的时候经常需要抓包手机,用于接口请求跟踪,但iOS的抓包经常性的配不成功,经过踩过不少坑后终于知道了整个配置流程,此文记录Fiddler抓包iOS手机的配置流程. Step ...

  3. 在centos上部署docker与wordpress

    简介 有一个wordpress服务器需要迁移了,之前都是别人维护的,现在需要迁移到自己维护,给的系统是linux centos 8.4.迁移包括mysql,php,phpmyadmin,wordpre ...

  4. CW信号的正交解调

    1.CW信号   CW可以叫做等幅电报,它通过电键控制发信机产生短信号"."(点)和长信号"--"(划),并利用其不同组合表示不同的字符,从而组成单词和句子. ...

  5. Win10正式专业版激活方法

      首先,我们先查看一下Win10正式专业版系统的激活状态: 点击桌面左下角的"Windows"按钮,从打开的扩展面板中依次点击"设置"-"更新和安全 ...

  6. 在C#中通过使用Newtonsoft.Json库来解析天地图地理编码(GeoCoder)服务接口返回的Json格式的数据,以及HttpWebRequest 设置不完全时服务器返回“远程服务器返回错误: (403) 已禁止”解决方法

    天地图地理编码(GeoCoder)服务接口返回的Json格式的数据,如下所示: http://api.tianditu.gov.cn/geocoder?ds={"keyWord": ...

  7. 基于开源IM即时通讯框架MobileIMSDK:RainbowChat v11.5版已发布

    关于MobileIMSDK MobileIMSDK 是一套专门为移动端开发的开源IM即时通讯框架,超轻量级.高度提炼,一套API优雅支持UDP .TCP .WebSocket 三种协议,支持iOS.A ...

  8. VSTO踩坑记录(1)- 从零开始开发outlook插件

    概述 vsto是微软提供的一种开发office插件的一种技术,现在看来有点落后了,不过项目需要的情况下,总不能跟领导说这活干不了吧?附上官方文档 安装好必备的开发环境,我用的是vs2022,在安装程序 ...

  9. 在 .NET 9 中使用 Scalar 替代 Swagger

    前言 在.NET 9发布以后ASP.NET Core官方团队发布公告已经将Swashbuckle.AspNetCore(一个为ASP.NET Core API提供Swagger工具的项目)从ASP.N ...

  10. 创建企业级地理数据库——PostgreSQL版

    创建PostgreSQL空间数据库 填写相应的参数,选择授权文件 报错 默认安装postgresql后,执行以上操作报错 "You must copy the latest ST_GEOME ...