Javascript正则表达式难点、重点
2017-11-09 17:03
225 查看
重复的贪婪性
{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
最后:来个小例子结束本篇文章:(利用正则来获取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 match()函数匹配正则表达式时的返回值问题
- JavaScript中常用的正则表达式
- JavaScript正则表达式
- Javascript 正则表达式_5
- javascript中的正则表达式
- JavaScript正则表达式上之基本语法
- JavaScript的正则表达式实现邮箱校验
- javascript 正则表达式
- 【笔记】javascript正则表达式的预查分类
- JavaScript正则表达式函数总结(常用)
- javaScript 正则表达式
- javascript的正则表达式 积累
- 常用的JavaScript验证正则表达式
- JavaScript正则表达式验证代码(推荐)
- JavaScript中正则表达式test()、exec()、match() 方法区别
- 正则表达式(JavaScript)
- JavaScript 正则表达式(笔记)
- javascript正则表达式使用详解
- JavaScript系列文章:详解正则表达式之三
- 常用的JavaScript验证正则表达式