Javascript正则表达式难点、重点

cheukyin 发布于2019-08-21 17:32 / 2125人阅读

摘要：接下来再看可以看到结果变成了，这是因为表达式匹配的内容可以用来表示忽略分组非捕获分组再来一个例子再来个时间转化的例子向前查找此东西是个位置即和。其中是一个子正则表达式。

重复的贪婪性

 {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}1d{2}/;
console.log(reg.test("2016-10-15"));    // ==>true
console.log(reg.test("2016.10.15"));    // ==>true
console.log(reg.test("2016/10/15"));    // ==>true
console.log(reg.test("2016-10/15"));    // ==>false

再来一个例子：

console.log("1-2-3-4".replace(/(d)/g,"x"));
// ==> x-x-x-x
console.log("1-2-3-4".replace(/(-d)/g,"x"));
// ==> 1xxx
console.log("1-2-3-4".replace(/-(d)/g,"x"));
// ==> 1xxx
console.log("1-2-3-4".replace(/(-d)/g,"0$1"));
// ==> 10-20-30-4
console.log("1-2-3-4".replace(/-(d)/g,"0$1"));
// ==> 1020304
console.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 (?=p) (?!p)

(?=3)表示啥意思呢？表示3前面的位置，见例子：

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

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

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

注意(?!d)表示的意思不是“非数字前面的位置”，而是所有位置中扣掉数字前面位置。
再来看一个例子：
假如”a1b2c3d4“这个字符串，我要匹配b或c前面的数字，怎么做呢？

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

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

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

最后：来个小例子结束本篇文章：（利用正则来获取dom的class）

超融合服务器服务器托管 javascript重点正则正则表达式正则匹配正则表达式 -正则表达式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89645.html

JavasScript重难点知识

摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...

forsigner 2019-08-21 18:36 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

muddyway 2019-08-29 13:21 评论0 收藏0
JS笔记

摘要：从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章，涉及到优化等多个方面。 TypeScript 入门教程从 JavaScript 程序员的角度总结思考，循序渐进的理解 TypeScript。网络基础知识之 HTTP 协议详细介绍 HTT...

rottengeek 2019-08-22 13:58 评论0 收藏0