摘要:接下来再看可以看到结果变成了,这是因为表达式匹配的内容可以用来表示忽略分组非捕获分组再来一个例子再来个时间转化的例子向前查找此东西是个位置即和。其中是一个子正则表达式。
重复的贪婪性
{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)
- function getByClass(oParent, sClass) {
- var tag = oParent.getElementsByTagName("*");
- var arr = [];
- var reg = new RegExp("" + sClass + "", "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);
- })
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89645.html
摘要:忍者级别的函数操作对于什么是匿名函数,这里就不做过多介绍了。我们需要知道的是,对于而言,匿名函数是一个很重要且具有逻辑性的特性。通常,匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次,彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制,如果...
摘要:从最开始的到封装后的都在试图解决异步编程过程中的问题。为了让编程更美好,我们就需要引入来降低异步编程的复杂性。异步编程入门的全称是前端经典面试题从输入到页面加载发生了什么这是一篇开发的科普类文章,涉及到优化等多个方面。 TypeScript 入门教程 从 JavaScript 程序员的角度总结思考,循序渐进的理解 TypeScript。 网络基础知识之 HTTP 协议 详细介绍 HTT...
阅读 849·2023-04-25 21:21
阅读 3230·2021-11-24 09:39
阅读 3072·2021-09-02 15:41
阅读 2000·2021-08-26 14:13
阅读 1833·2019-08-30 11:18
阅读 2774·2019-08-29 16:25
阅读 510·2019-08-28 18:27
阅读 1585·2019-08-28 18:17
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要