此案例在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. 案例 | 某药企引进正也科技S2P系统 整合营销业务

    为了获取更大的市场空间,医药健康行业正迎来一波前所未有的产业升级.尽管不少企业取得了许多成绩,但仍面临诸多挑战. 天津某医药公司是集医药研发.药品生产.医药商业.大健康产业于一体的大型企业.敢为人先开 ...

  2. SQLServer单表无缝转换到MySQL

    场景:SQLServer 单表结构,无缝转换到MySQL 方法: 1. Navicat-右键需要导出的数据表-逆向表到模型 2. 弹出来的模型窗口里,选择 转换模型为  默认MySQL8.0 确认 3 ...

  3. 腾讯云对象存储联合DataBend云数仓打通数据湖和数据仓库

    随着数字化进程不断深入,数据呈大规模.多样性的爆发式增长.为满足更多样.更复杂的业务数据处理分析的诉求,湖仓一体应运而生.在Gartner发布的<Hype Cycle for Data Mana ...

  4. [WPF UI] 为 AvalonDock 制作一套 Fluent UI 主题

    AvalonDock 是我这些天在为自己项目做技术选型时发现的一个很好的开源项目,它是一个用于 WPF 的布局控件库,可以帮助我们实现类似 Visual Studio 的布局效果.因为它自带的一些样式 ...

  5. 在 MySQL 创造类似 PipelineDB 的流视图(continuous view)

    公司的系统采用的是 Google Cloud SQL 提供的 MySQL 数据库,由于历史原因,数据库成本极高,需要对它进行优化缩减成本. 相比 PostgresSQL,MySQL 主要缺少以下特性, ...

  6. shell 获取 目录名 当前目录名

    Four ways to extract the current directory name By  Sergio Gonzalez Duran on November 06, 2007 (9:00 ...

  7. JSchException: Algorithm negotiation fail问题解决之路

    最近一个需求用到了SFTP上传功能,同事之前已经封装好了SFTP工具类,用的是JSch,本着不要重复造轮子的想法,就直接拿来用了.交代下环境,JDK为1.7,JSch版本为0.1.51.自测通过.测试 ...

  8. SPRING BOOT 项目中使用<SCOPE>PROVIDED</SCOPE>打包成WAR到TOMCAT运行出现的问题总结

    大家知道 spring boot 项目是自带tomcat 的,但是我们有时候是需要把项目打包成war 然后放到独立的tomcat中运行的,这个时候我们就需要将它自带的tomcat给排除开,这时候我们就 ...

  9. python_Django---基础

    1.创建app 终端:python3.x manage.py startapp  app(名字) 2.路由创建 urls.py: 导入函数:from app(app名) import views 创建 ...

  10. Qt开源作品44-超级曲线图表

    按照国际惯例,先吹吹牛,QCustomPlot这个开源图表组件,作者绝对是全宇宙Qt领域的天花板,设计的极其巧妙和精美,各种情况都考虑到了,将每个功能细分到不同的类,每个类负责管理自己的绘制和各种属性 ...