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: 键盘按 ...
随机推荐
- 案例 | 某药企引进正也科技S2P系统 整合营销业务
为了获取更大的市场空间,医药健康行业正迎来一波前所未有的产业升级.尽管不少企业取得了许多成绩,但仍面临诸多挑战. 天津某医药公司是集医药研发.药品生产.医药商业.大健康产业于一体的大型企业.敢为人先开 ...
- SQLServer单表无缝转换到MySQL
场景:SQLServer 单表结构,无缝转换到MySQL 方法: 1. Navicat-右键需要导出的数据表-逆向表到模型 2. 弹出来的模型窗口里,选择 转换模型为 默认MySQL8.0 确认 3 ...
- 腾讯云对象存储联合DataBend云数仓打通数据湖和数据仓库
随着数字化进程不断深入,数据呈大规模.多样性的爆发式增长.为满足更多样.更复杂的业务数据处理分析的诉求,湖仓一体应运而生.在Gartner发布的<Hype Cycle for Data Mana ...
- [WPF UI] 为 AvalonDock 制作一套 Fluent UI 主题
AvalonDock 是我这些天在为自己项目做技术选型时发现的一个很好的开源项目,它是一个用于 WPF 的布局控件库,可以帮助我们实现类似 Visual Studio 的布局效果.因为它自带的一些样式 ...
- 在 MySQL 创造类似 PipelineDB 的流视图(continuous view)
公司的系统采用的是 Google Cloud SQL 提供的 MySQL 数据库,由于历史原因,数据库成本极高,需要对它进行优化缩减成本. 相比 PostgresSQL,MySQL 主要缺少以下特性, ...
- shell 获取 目录名 当前目录名
Four ways to extract the current directory name By Sergio Gonzalez Duran on November 06, 2007 (9:00 ...
- JSchException: Algorithm negotiation fail问题解决之路
最近一个需求用到了SFTP上传功能,同事之前已经封装好了SFTP工具类,用的是JSch,本着不要重复造轮子的想法,就直接拿来用了.交代下环境,JDK为1.7,JSch版本为0.1.51.自测通过.测试 ...
- SPRING BOOT 项目中使用<SCOPE>PROVIDED</SCOPE>打包成WAR到TOMCAT运行出现的问题总结
大家知道 spring boot 项目是自带tomcat 的,但是我们有时候是需要把项目打包成war 然后放到独立的tomcat中运行的,这个时候我们就需要将它自带的tomcat给排除开,这时候我们就 ...
- python_Django---基础
1.创建app 终端:python3.x manage.py startapp app(名字) 2.路由创建 urls.py: 导入函数:from app(app名) import views 创建 ...
- Qt开源作品44-超级曲线图表
按照国际惯例,先吹吹牛,QCustomPlot这个开源图表组件,作者绝对是全宇宙Qt领域的天花板,设计的极其巧妙和精美,各种情况都考虑到了,将每个功能细分到不同的类,每个类负责管理自己的绘制和各种属性 ...