正则表达式 (js)
文章目录
- 正则字符串提取数字
- 正则字变量
- 使用对象创建
- 选择符 |
- 转义
- 字符边界符
- 数值与空白元字符
- w和W元字符
- 点字符的使用
- 匹配所有字符
- i和g 模式修正
- 汉字与字符属性
- lastIndex
- y模式
- 原子表
- 区间匹配
- 排除匹配
- 原子表字符不解析
- 原子表匹配
- 原子组
- 不记录分组
- 重复匹配
- 批量使用正则完成密码的验证
- 禁止贪婪
- matchAll 全局匹配
- exec 全局匹配
- $符
- 原子组的别名
- 断言匹配 ?=
- 手机号码断言隐藏
来源博客:【Harryの心阁】
正则字符串提取数字
- 使用\d将数字匹配出来 /g全局匹配
let hd = 'daw21321dasda23123123';
// 不使用正则表达式写一个方法
// console.log(Number.isNaN(parseInt('1')));
// ...将字符串转换成数组形式 Array.from()方法也可以 使用isNaN判断是否为非数字
// let news = [...hd].filter(v=>!Number.isNaN(parseInt(v)));
// 使用join方法连接
// 使用正则表达式
let news = hd.match(/\d/g).join("")
console.log(news);
正则字变量
- 使用eval()方法
- 使用test()方法返回的是布尔值
let hd = 'daw21321dasda23123123';
let a = '1';
let news = eval(`/${a}/`).test(hd) // true
console.log(news);
使用对象创建
- 替换字符串中匹配到的字符
<div class="content">mr90.top</div>
<script>
let div = document.querySelector('.content')
let a = prompt('输入字符');
let regs = new RegExp(a,"g");
div.innerHTML = div.innerHTML.replace(regs,search=>{return `<span style="color:red">${search}</span>`
})
</script>
选择符 |
- 匹配左右两侧的条件
- 原子组() 原子表[]
let tel = '023-2312322'
console.log(/(023|020)\-\d{7,8}/.test(tel)); // true
// 重复的条件使用原子组的方法{7,8}表示 7-8位的数字 \- 表示转义
let reg = /(12|34)/;
let hd = '31w231';
console.log(hd.match(reg)); // null
转义
- 在字面量里面 使用
\d \.
将字符可实现转义 - 在构造函数中
\d \.
表示的是该字符 所以 必须再加一个转义符\\d \\.
let price = '12@21';
// . 除换行外的任何字符
console.log(/\d+.\d/.test(price)); //true
let reg = new RegExp('\\d+\\.\\d+')
// \\ 双转义
console.log(reg.test(price)); //false// 网址
let url = 'https://u.mr90.top'
let reg = new RegExp(/https?:\/\/\w+\.\w+\.\w+/)
console.log(reg.test(url)); //true
console.log(/https?:\/\/\w+\.\w+/.test(url)); //true
字符边界符
- 边界符表示开始和结尾必须满足条件
/^[a-z]$/
{3,6}
加入边界字符 才能控制其数量范围
<input type="text" value="" name="user">
<script>document.querySelector("[name='user']").addEventListener('keyup',function(){let flag = this.value.match(/^[a-z]{3,6}$/)console.log(flag);})
</script>
数值与空白元字符
\d
匹配数字\D
匹配非数字- 在原子表中首页
^
表示非的意思/[^]/
\s
表示匹配空白和换行\S
非空白
let hd = '张三:021-9999299,李四:022-2122122'
// 匹配所有的数字号码
console.log(hd.match(/\d{3}\-\d{7,8}/g)); //["021-9999299", "022-2122122"]
// 匹配姓名 + 表示匹配相邻的符合条件的
console.log(hd.match(/[^:\d,-\s]+/g)); // ["张三", "李四"]
w和W元字符
\w
匹配字母和数字 下划线\W
与之相反
点字符的使用
- 匹配所有字符默认模式下,它匹配除了换行符以外的任意字符。
let hd = `wad\nawd\n`
console.log(hd.match(/.+/g)); // [wad,awd]
匹配所有字符
- 在原子组中
[\s\S]
或者[\d\D]
- 匹配标签使用
/<span>[\s\S]+</span>/
i和g 模式修正
g
全局匹配i
不区分大小写
let hd = `
#1 js,200元 #
#2 php,300元 #
#9 mr90.top # 你好
#3 node.js,180元 #
`
let lessons = hd.match(/^\s*#\d+\s+.+\s+#$/gm).map(v => {v = v.replace(/\s*#\d+\s*/, '').replace(/\s+#/, '')let [name, price] = v.split(',')return { name, price }
})
console.log(lessons);
/*
0: {name: "js", price: "200元"}
1: {name: "php", price: "300元"}
2: {name: "node.js", price: "180元"}
length: 3*/
汉字与字符属性
\p
表示匹配字符\P
相反
lastIndex
- lastIndex 属性用于规定下次匹配的起始位置
exec()
方法用于检索字符串中的正则表达式的匹配。
let hd = 'dawdaw31';
let reg = /\w/g;
console.log(reg.exec(hd));
console.log(reg.lastIndex); // lastIndex 属性用于规定下次匹配的起始位置
// 将匹配到的值赋值给res 有值打印数据 否则返回null 不满足循环条件 循环
while(res=reg.exec(hd)){console.log(res);
}
y模式
- 后一次匹配都是从上一次匹配成功的下一个位置开始
let hd =`你好世界大王大大:11111111,1111231,213123212,
达瓦达,网站:u.mr90.top`
let reg = /(\d+),?/y
reg.lastIndex = 9
let qq = []
// console.log(reg.exec(hd));
while(res=reg.exec(hd)) qq.push(res[1])
console.log(qq);
原子表
[]
匹配中括号内的所有条件- 原子组和原子表搭配使用
let times = '2020-02/21'
console.log(times.match(/^\d{4}[-\/]\d{2}[-\/]\d{2}$/)); // 2020/02-21
console.log(times.match(/^\d{4}([-\/])\d{2}\1\d{2}$/)); // null
console.log(times.match(/^\d{4}([-\/])\d{2}\1\d{2}$/)); // 2020/02/21
区间匹配
- 数字区间
[0-9]+
加号表示贪婪模式 - 字母区间
[a-z]
排除匹配
[^]
表示排除匹配\p
表示匹配满足{}
内的字符
// let hd = 'u.mr90.top'
// console.log(hd.match(/[^u]/gi)); //[".", "m", "r", "9", "0", ".", "t", "o", "p"]
let hd = `张三:231-23123123,李四#:123-312313;`
console.log(hd.match(/[^:\w-,#;]+/g)); // 贪婪模式下的排除匹配
console.log(hd.match(/\p{sc=Han}+/gu)); // ["张三", "李四"]
原子表字符不解析
[.+]
[()]
仅表示原来字符的意思
原子表匹配
s
忽略换行符*
表示0个或者多个[\d\D] [\s\S]
匹配所有字符
<body><h1>ddawddawd</h1><h2>dwad</h2><span>dasdwaadaw</span>
</body>
<script>let body = document.body;// let reg = /<(\w+)>[^]+<\/\1>/gi // 注意贪婪模式let reg = /<(h[1-6])>[^]*<\/\1>/gi // 注意贪婪模式 *表示0个或者多个body.innerHTML = body.innerHTML.replace(reg,'')
</script>
原子组
()
表示一个整体- 可进行别名的编号
- 使用原子组实现标签的替换
- 在原子组回调函数中,各个参数表示的是 第一个是满足条件的所有内容 其他参数 依次为定义的满足原子组条件的内容
<body><h1>ddawddawd</h1><h5></h5><h2>dwad</h2><span>dasdwaadaw</span>
</body>
<script>// 原子组替换let body = document.body// body.innerHTML = body.innerHTML.replace(/<(h[1-6]+)>([^]*)<\/\1>/g,`<p>$2</p>`) // 直接表示body.innerHTML= body.innerHTML.replace(/<(h[1-6]+)>([^]*)<\/\1>/g,(f0,f1,f2)=>{// console.log(f0); // 输入满足条件的所有// console.log(f1); // 输出第一个原子组匹配的内容// console.log(f2);// 输出第二个原子组匹配的内容return `<p>${f2}</p>`}) // 函数表示
</script>
不记录分组
- 使用不记录分组,就是使用原子组后 无法再去使用函数参数去调用
let url = `https://u.mr90.tophttp://github.comhttpS://mr90.top`// 使用不记录分组,就是使用原子组后 无法再去使用函数参数去调用let reg = /https?:\/\/((?:\w+\.)?\w+\.(?:com|top))/giconsole.log(reg.test(url)); //true // 有满足条件的内容console.log(url.match(reg)); // ["https://u.mr90.top", "http://github.com", "httpS://mr90.top"]
// console.log(reg.exec(url)); // 返回满足条件的第一个内容
// console.log(reg.lastIndex); // 记录下次开始时的索引位置let urlA = [];while(res=reg.exec(url)) urlA.push(res[1])console.log(urlA);
重复匹配
+
一个或者多个{1,}
类似与加号*
0个或者多个{0,}
类似与*号?
0个或者1个
批量使用正则完成密码的验证
// 对表单输入的值进行验证
document.querySelector('[name=pwd').addEventListener('keyup', (e) => {// console.log();let value = e.target.valuelet reg = [/^[a-z0-9]{5,7}$/i,/[A-Z]/, /[\d]/]let state = reg.every(v=>v.test(value))console.log(state?'正确':'错误');})
禁止贪婪
{2,}?
限制贪婪*?
禁止贪婪
<body><main><span>u.mr90.top1</span><span>u.mr90.top2</span><span>u.mr90.top3</span></main>
</body>
<script>let main = document.querySelector('main')let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上main.innerHTML = main.innerHTML.replace(reg,(p0,p1)=>{console.log(p0);return `<h2 style="color:red">${p1}</h2>`})
</script>
matchAll 全局匹配
<body><main><span>u.mr90.top1</span><span>u.mr90.top2</span><span>u.mr90.top3</span></main>
</body>
<script>// 不使用matchAll方法let main = document.querySelector('main')let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上let content = [];// main.innerHTML = main.innerHTML.replace(reg,(p0,p1)=>{// content.push(p1)// return `<h2 style="color:red">${p1}</h2>`// })// console.table(content)// 使用matchAll方法let hd = main.innerHTML.matchAll(reg)// console.log(main.innerHTML.matchAll()); // 遍历迭代for (const i of hd) {content.push(i[1])// console.log(i);}console.table(content);
</script>
exec 全局匹配
- 匹配时
g
不能缺少 search
返回匹配的索引值
// exec方法 匹配全局
let main = document.querySelector('main')
let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
function fn(string, reg) {let content = [];while (res = reg.exec(string)) {content.push(res)} return content
}
console.log(fn(main.innerHTML, reg));
// exec方法 匹配全局
let main = document.querySelector('main')
let reg = /<span>([^]+?)<\/span>/g // ?加上问号 并且写到原子组中为了将贪婪的范围缩小到每一行上
let content = [];
function fn(string, reg) {while (res = reg.exec(string)) content.push(res)
}
fn(main.innerHTML, reg)
console.log(content);
$符
$`
匹配开头的第一个字符$'
匹配结尾字符$&
匹配自身
// let tel = '2020/12/23'// console.log(tel.replace(/\//g,'-')); // 2020-12-23// let tel = '(021)9999999 (023)4444444'// console.log(tel.replace(/[(]+(\d{3})[)](\d{7})/g,'$1-$2')); //021-9999999 023-4444444let tel = '%Harry='console.log(tel.replace(/\w+/g,'$`')); // $` 匹配开头的第一个字符 %%=console.log(tel.replace(/\w+/g,"$'")); // $' 匹配结尾字符 %==console.log(tel.replace(/\w+/g,"$&")); // $& 匹配自身console.log(tel.replace(/\w+/g,"$`$`$&$'$'")); // $& 匹配自身
原子组的别名
- 格式
?<别名>
- 调用
<别名>
<body><main><a href="http://u.mr90.top">博客</a><a href='https://baidu.com'>百度</a><a href="https://github.com">Github</a></main>
</body>
<script>let main = document.querySelector('main')let reg = /<a.*?href=(['"])(?<link>.*?)\1>(?<title>.*?)<\/a>/gi// 进行迭代遍历for (const i of main.innerHTML.matchAll(reg)) {// console.log(i);console.table(i.groups)}
</script>
断言匹配 ?=
(?=)
表示在之前条件的后面满足该断言匹配的内容(?<=)
表示前面是条件的匹配内容(?!)
表示后面不是某个条件的内容(?<!)
表示前面不是某个条件的内容
<body><main><a href="http://u.mr90.top">博客</a><a href='https://baidu.com'>百度</a><a href="https://github.com">Github</a></main>
</body>
<script>let main = document.querySelector('main')let reg = /(?<=href=(['"]))(.*?)(?=\1>)/gimain.innerHTML = main.innerHTML.replace(reg,'https://mr90.top')
</script>
手机号码断言隐藏
let users = `
李四:12323212232
张三:12322131122
`
let reg = /(?<=\d{7})\d{4}/gi
console.log(users.replace(reg,'*'.repeat(4)));
## 公众号:今日在学
![](https://img-blog.csdnimg.cn/img_convert/53f5513e0a10aa73e7b99f2f12011697.png)
正则表达式 (js)相关推荐
- 学习 正则表达式 js java c# python 通用
正则表达式 js java c# python 学习网站 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Globa ...
- html5邮箱验证正则表达式,js正则表达式验证邮箱
问题描述: 使用js的正则表达式验证邮箱 注意事项: 1.在正则表达式的前后要加上^在后面要加上$否则会出现错误: 2.在使用单个字符是使用[xx]括起来 代码: function validateE ...
- 一些正则表达式(js代码验证)
Windows路径 1. 最大路径长度: 1.1 最大路径长度默认是260个字符,如果是本地路径,可以指定的有效长度是256个字符,比如:"C:\有效字符串 ",实际C:\占用3个 ...
- 最新手机号码、电话号码正则表达式js
正则表达式(regular expression)是一个描述字符模式的对象.使用JavaScript正则表达式可以进行强大的模式匹配和文本检索与替换功能. 手机号码正则表达式验证. function ...
- 比较正宗的验证邮箱的正则表达式js代码详解
来源:http://www.jb51.net/article/31182.htm 邮箱正则最正宗的一条正则语句是^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a- ...
- 正则表达式 js javascript 验证各种格式校验 前端常用 uniapp
不好找请自行在浏览器查找关键词,我是在uniapp使用的, /*** 验证电子邮箱格式*/ function email(value) {return /^\w+((-\w+)|(\.\w+))*\@ ...
- 匹配磁力链接的正则表达式 js
magnet:?xt=urn:btih:开头 + 40位HASH值0-9A-F /^(magnet:\?xt=urn:btih:)[0-9a-fA-F]{40}.*$/
- JS 活学活用正则表达式
记录一些项目中用到的正则工具,将持续更新... 如果对JS中的正则不太了解,可以参考一下JS 中正则表达式必知必会 1. 字符串操作 去除字符串两边的空格 trim String.prototype. ...
- JS正则表达式常见用法实例详解
这篇文章主要介绍了JS正则表达式常见用法,结合实例形式分析了javascript元字符.分组符.修饰符.量词基本含义,并结合具体案例形式分析了javascript正则基本使用技巧,需要的朋友可以参考下 ...
- js正则表达式获取后缀名_jquery如何获取文件后缀
jquery获取文件后缀的方法:1.使用正则表达式"(/[.]/.exec(filename)) ? /[^.]+$/.exec(filename.toLowerCase()):'';&qu ...
最新文章
- Failed to load module script: The server responded with a non-JavaScript MIME type of “text/plain“.
- Linux课程设计八音盒,单片机课程设计——八音盒精要.doc
- 分布式锁实现:Redis
- 关于页面有多个验证控件和多个按钮的问题
- MSBuild学习总结
- 栈应用_计算按运算符优先级分布的算式(代码、分析、汇编)
- 美团点评容器平台HULK的调度系统
- 阿里云构建Jenkins服务
- 春眠不觉晓,SQL 知多少?| 原力计划
- Python基础——mysql数据库、SQLAlchemy
- 数学图形(2.1)三叶结
- 如何高效设计游戏——从抽奖模型到圆桌算法
- 产品沉思录精选:如何像管理金融投资组合一样来管理知识?
- 阿里云 OSS浏览器使用步骤
- 流利阅读 2019.1.24 China’s about to rediscover Peppa Pig
- qq空间小尾巴怎么修改
- 【像素与浏览器视口的细节】及移动web设置“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no“原因
- C++中使用ODBC连接SQL Server数据库
- Source Code Chain(SCC):基于区块链的人工智能软件工程项目
- div布局系列 - 两端对齐的方法