博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Javascript正则表达式难点、重点
阅读量:6936 次
发布时间:2019-06-27

本文共 2652 字,大约阅读时间需要 8 分钟。

重复的贪婪性

{n,m}   {n,}   {n}   ?   +   *
  • ?表示匹配0次或1次,(最多匹配1次);

  • +表示匹配1次或多次,(最少匹配1次);

  • *表示匹配0次或多次,(匹配任意次);

  • {m,n}表示匹配m到n次,(最少m次,最多n次);

举例:

console.log("@123@456@789".match(/\d{1,2}/g))// ==> ["12", "3", "45", "6", "78", "9"]

{1,2}优先匹配2次(贪婪),还可以匹配1次,可以看到上面的结果为["12", "3", "45", "6", "78", "9"];

非贪婪,在量词后面加一个?即可;

console.log("@123@456@789".match(/\d{1,2}?/g))// ==> ["1", "2", "3", "4", "5", "6", "7", "8", "9"]

表示匹配到1次了就不再匹配了(非贪婪)。

分组

假设有这样不同格式的日期(2016-10-15、2016/10/15、2016.10.15),如果想要提取具体的年月日,可以这么写:

console.log("2016-10-15".match(/\d{4}[\/\-\.]\d{2}[\/\-\.]\d{2}/))// ==> ["2016-10-15"]

上面是没有添加分组时候的,此时,可以给它添加分组:

console.log("2015-10-15".match(/(\d{4})[\/\-\.](\d{2})[\/\-\.](\d{2})/))// ==> ["2016-10-15", "2016", "10", "15"]

可以看到输出的结果是一个array,里面的年月日就已经被提取出来了。接下来再看:

console.log("2015-10-15".replace(/(\d{4})[\/\-\.](\d{2})[\/\-\.](\d{2})/g,"$3-$2-$1"))// ==> "15-10-2016"

可以看到结果变成了:15-10-2016,这是因为表达式匹配的内容可以用$1,$2,...来表示

忽略分组(非捕获分组)

var reg = /(?:\d{4})(\-|\.|\/)\d{2}\1\d{2}/;console.log(reg.test('2016-10-15'));    // ==>trueconsole.log(reg.test('2016.10.15'));    // ==>trueconsole.log(reg.test('2016/10/15'));    // ==>trueconsole.log(reg.test('2016-10/15'));    // ==>false

再来一个例子:

console.log("1-2-3-4".replace(/(\d)/g,"x"));// ==> x-x-x-xconsole.log("1-2-3-4".replace(/(-\d)/g,"x"));// ==> 1xxxconsole.log("1-2-3-4".replace(/-(\d)/g,"x"));// ==> 1xxxconsole.log("1-2-3-4".replace(/(-\d)/g,"0$1"));// ==> 10-20-30-4console.log("1-2-3-4".replace(/-(\d)/g,"0$1"));// ==> 1020304console.log("1-2-3-4".match(/(-\d)/g));// ==> ["-2", "-3", "-4"]console.log("1-2-3-4".match(/-(\d)/g));// ==> ["-2", "-3", "-4"]console.log(RegExp.$1);// ==> 4

再来个时间转化的例子:

var date="2014-12-30 12:30:20";console.log(date.replace(/(\d{4})-(\d{2})-(\d{2})/g,"$2-$3-$1"));// ==> "12-30-2014 12:30:20"console.log(date.replace(/(\d{4})-(\d{2})-(\d{2})\s[\w+\:]{8}/g,"$2-$3-$1"))// ==> "12-30-2014"

向前查找 (此东西是个位置!)

即(?=p)和(?!p)。其中p是一个子正则表达式。关于锚字符匹配的问题,在ES5中总共有6个。

^ $ \b \B (?=p) (?!p)

(?=3)表示啥意思呢?表示3前面的位置,见例子:

console.log("a1b2c3d4".replace(/(?=3)/g,"x"));// ==> a1b2cx3d4console.log("a1b2c3d4".replace(/(?=\d)/g,"x"));// ==> ax1bx2cx3dx4

那么(?!...)的概念也好理解了,表示取非的,见例子:

console.log("a1b2c3d4".replace(/(?!3)/g,"x"));// ==> xax1xbx2xc3xdx4xconsole.log("a1b2c3d4".replace(/(?!\d)/g,"x"));// ==> xa1xb2xc3xd4x

注意(?!d)表示的意思不是“非数字前面的位置”,而是所有位置中扣掉数字前面位置。

再来看一个例子:
假如”a1b2c3d4“这个字符串,我要匹配b或c前面的数字,怎么做呢?

console.log("a1b2c3d4".replace(/\d(?=[bc])/g,"x"));// ==> axbxc3d4console.log("a1b2c3d4".match(/\d(?=[bc])/g));// ==> ["1", "2"]

再来看一个:假如有这样一个字符串"a1a2a3a4a5",我要匹配所有的a但不包括3前面的a,怎么做呢?见下面:

console.log("a1a2a3a4a5".replace(/a(?!3)/g,"x"));// ==> x1x2a3x4x5

最后:来个小例子结束本篇文章:(利用正则来获取dom的class)

转载地址:http://ocbnl.baihongyu.com/

你可能感兴趣的文章
JPA的工具类
查看>>
Java 多线程编程核心技术 笔记
查看>>
ComponentOne 2019V1更新亮点之ASP.NET MVC篇
查看>>
Java程序员应该掌握哪些东西?
查看>>
阿里千万级高性能、高并发架构的经验之谈
查看>>
学java就两个问题
查看>>
CentOS7离线安装gcc
查看>>
vue router+vuex实现首页登录验证判断逻辑
查看>>
现代企业能源管理系统开发主要运用到的信息技术?
查看>>
python开发环境 visual python
查看>>
Scala 单例对象
查看>>
cannot flashback the table because row movement
查看>>
拖放在XMind中有何应用
查看>>
OSChina 周一乱弹 ——这个公主都没一旁的汪可爱
查看>>
OSChina 周四乱弹 ——程序员座驾千万,出门千人陪同
查看>>
使用video标签或者videoJS 做 mp4点播 编码不对播放失败。
查看>>
SSH公钥生成及配置
查看>>
iOS 新浪微博快速集成
查看>>
禁用浏览器返回
查看>>
flask+uwsgi+nginx部署网站
查看>>