Javascript正则表达式难点、重点
重复的贪婪性
{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')); // ==>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 \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
总结:
- (?=X ) 零宽度正先行断言。仅当子表达式 X 在 此位置的右侧匹配时才继续匹配。例如,\w+(?=\d) 与后跟数字的单词匹配,而不与该数字匹配。此构造不会回溯。
- (?!X) 零宽度负先行断言。仅当子表达式 X 不在 此位置的右侧匹配时才继续匹配。例如,例如,\w+(?!\d) 与后不跟数字的单词匹配,而不与该数字匹配 。
- (?<=X) 零宽度正后发断言。仅当子表达式 X 在 此位置的左侧匹配时才继续匹配。例如,(?<=19)99 与跟在 19 后面的 99 的实例匹配。此构造不会回溯。
- (?<!X) 零宽度负后发断言。仅当子表达式 X 不在此位置的左侧匹配时才继续匹配。例如,(?<!19)99 与不跟在 19 后面的 99 的实例匹配
最后:来个小例子结束本篇文章:(利用正则来获取dom的class)
<div class="box"></div>
<script>
function getByClass(oParent, sClass) {
var tag = oParent.getElementsByTagName('*');
var arr = [];
var reg = new RegExp('\\b' + sClass + '\\b', "i");
for (var i = 0; i < tag.length; i++) {
if (reg.test(tag[i].className)) {
arr.push(tag[i]);
}
}
return arr;
}
function findClassInElements(className, type) {
var ele = document.getElementsByTagName(type || '*');
var result = [];
var reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
for (var i = 0; i < ele.length; i++) {
if (reg.test(ele[i].className)) {
result.push(ele[i]);
}
}
return result
}
console.log(getByClass(document.body, "box"));
console.log(findClassInElements('box'));
var box = findClassInElements('box');
box.forEach(function(value,index){
console.log(value);
})
</script>
Javascript正则表达式难点、重点的更多相关文章
- 浅析JavaScript正则表达式
1.正则表达式的定义 正则表达式是一个描述字符模式的对象.JavaScript的RegExp类表示正则表达式,String和RegExp都定义了方法,后者使用正则表达式进行强大的模式匹配和文本检索与替 ...
- JavaScript正则表达式API
1. [代码][JavaScript]代码 参考自<Core JavaScript Reference 1.5> JavaScript正则表达式有两种写法(随便哪种,看个人习惯): ...
- javascript正则表达式入门先了解这些
前言 此内容由学习<JavaScript正则表达式迷你书(1.1版)>整理而来(于2020年3月30日看完).此外还参考了MDN上关于Regex和String的相关内容,还有ECMAScr ...
- JavaScript正则表达式,你真的知道?
一.前言 粗浅的编写正则表达式,是造成性能瓶颈的主要原因.如下: var reg1 = /(A+A+)+B/; var reg2 = /AA+B/; 上述两个正则表达式,匹配效果是一样的,但是,效率就 ...
- 【JS】javascript 正则表达式 大全 总结
javascript 正则表达式 大全 总结 参考整理了一些javascript正则表达式 目的一:自我复习归纳总结 目的二:共享方便大家搜索 微信:wixf150 验证数字:^[0-9]*$ 验证n ...
- 理清JavaScript正则表达式--上篇
在JavaScript中,正则表达式由RegExp对象表示.RegExp对象呢,又可以通过直接量和构造函数RegExp两种方式创建,分别如下: //直接量 var re = /pattern/[g | ...
- 理清JavaScript正则表达式--下篇
紧接:"理清JavaScript正则表达式--上篇". 正则在String类中的应用 类String支持四种利用正则表达式的方法.分别是search.replace.match和s ...
- JavaScript正则表达式详解(一)正则表达式入门
JavaScript正则表达式是很多JavaScript开发人员比较头疼的事情,也很多人不愿意学习,只是必要的时候上网查一下就可以啦~本文中详细的把JavaScript正则表达式的用法进行了列表,希望 ...
- JavaScript正则表达式详解(二)JavaScript中正则表达式函数详解
二.JavaScript中正则表达式函数详解(exec, test, match, replace, search, split) 1.使用正则表达式的方法去匹配查找字符串 1.1. exec方法详解 ...
随机推荐
- 《我是IT小小鸟》读后感
<我是IT小小鸟>读后感 说实话,我根本不喜欢看这本书,要不是因为老师要求我也不会去看的,其实当老师提起这本书的时候我还是有点兴趣,去看的,可是看了很多后,觉得这根本不适合我,里面说的都是 ...
- lintcode-411-格雷编码
411-格雷编码 格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个二进制的差异. 给定一个非负整数 n ,表示该代码中所有二进制的总数,请找出其格雷编码顺序.一个格雷编码顺序必须以 0 ...
- NULL指针引起的一个linux内核漏洞
NULL指针一般都是应用于有效性检测的,其实这里面有一个约定俗成的规则,就是说无效指针并不一定是 NULL,只是为了简单起见,规则约定只要指针无效了就将之设置为NULL,结果就是NULL这个指针被用来 ...
- Struts2(二)
以下内容是基于导入struts2-2.3.32.jar包来讲的 1.关于StrutsPrepareAndExecuteFilter 启动StrutsPrepareAndExecuteFilter时加载 ...
- c文法
程序→<外部声明>|<程序> 外部声明→<功能定义>|<声明> 功能定义→<声明复合语句的类型> 类型→<VOID| CHAR| IN ...
- 明白JavaScript原型链和JavaScrip继承
原型链是JavaScript的基础性内容之一.其本质是JavaScript内部的设计逻辑. 首先看一组代码: <script type="text/javascript"&g ...
- CSS布局-垂直居中问题
在前端页面的布局方面,很多时候需要用到垂直居中,如果父集元素或子元素的高度是固定的那么垂直居中可以用line-height或者定位 top:50%:margin-top:- height/2 px:实 ...
- 【JavaScript】JAVA-表格里的c:foreach使用及数字总计
两步:1.上图 2.上代码 <div class="group-accordion" collapsible="true" active="tr ...
- Find the hotel HDU - 3193(RMQ)
题意: 有n个旅馆,从这n个旅馆中找出若干个旅馆,使得这若干个旅馆满足这样的条件:不能从其它和剩下的旅馆中找到一个价格和距离都小于这个旅馆的旅馆... 解析: 按price 排序,若price相同, ...
- [TJOI2008]彩灯 线性基
题面 题面 题解 题意:给定n个01串,求互相异或能凑出多少不同的01串. 线性基的基础应用. 对于线性基中的01串,如果我们取其中一些凑成一个新的01串,有一个重要的性质:任意2个不同方案凑出的01 ...