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方法详解 ...
随机推荐
- HDU 5875 Function 优先队列+离线
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5875 Function Time Limit: 7000/3500 MS (Java/Others) ...
- arp请求与回复
实验环境:wifi 1,手机192.168.1.103 2,电脑192.168.1.106 先删除电脑arp表数据 ping request: reply:
- 小工具xml生成记录
public partial class Form1 : Form { public Form1() { InitializeComponent ...
- mysql 8 server windows 安装经验分享
windows下安装一般分为文件/msi安装文件 本章我们说的是文件行的mysql server 安装 下载地址:https://dev.mysql.com/downloads/mysql/ 下载完后 ...
- bootstrap练习制作网页
导航条 <nav class="navbar navbar-default"> <div class="container-fluid"> ...
- Problem D - Non-boring sequences——Contest1004 - National Day Training Contest -- Day3
今天比赛的时候做的一个坑题.深坑啊. 题目意思是给你一个有n个数的数字序列.要你判断对于这个序列是都满足任意一个子序列都至少含有一个只出现一次的数字. 看完题目后没什么思路,一直以为要用线段树,每次删 ...
- 【bzoj4372】烁烁的游戏 动态点分治+线段树
题目描述 给一颗n个节点的树,边权均为1,初始点权均为0,m次操作:Q x:询问x的点权.M x d w:将树上与节点x距离不超过d的节点的点权均加上w. 输入 第一行两个正整数:n,m接下来的n-1 ...
- InnoDB 5.6 新特性之一:FullTEXT Indexes[1.简单介绍]
先来看一条SQL语句: SELECT * FROM aa where acol like '%like_normal%'; 当我们使用Innodb时,无论如何对这条语句进行优化,都是无意义的:有的人会 ...
- wp如何代码重启手机
用过windows phone手机操作系统的人都知道,wp的系统设置界面很长一串,我们并不能快速进入想要的设置项,更受不了的是有些常用的设置项竟然在最下边.因为前段时间没事做,于是乎写了个wp的工具类 ...
- 洛谷 P2015 二叉苹果树
老规矩,先放题面 题目描述 有一棵苹果树,如果树枝有分叉,一定是分2叉(就是说没有只有1个儿子的结点) 这棵树共有N个结点(叶子点或者树枝分叉点),编号为1-N,树根编号一定是1. 我们用一根树枝两端 ...