JS正则表达式常见用法实例详解


Posted in Javascript onJune 19, 2018

本文实例讲述了JS正则表达式常见用法。分享给大家供大家参考,具体如下:

前言:正则表达式(regular expression)反反复复学了多次,学了又忘,忘了又学,这次打算把基本的东西都整理出来,加强记忆,也方便下次查询。

学习正则表达式之前首先需要掌握记忆这些基本概念:

1.元字符:(.,\w,\W,\d,\D,\s,/S,^,$,)

字符 含义
. 匹配除了换行符以外的任意字符。
\s 代表任意空白符(换行符,制表符,空格)
\S 匹配任意非空字符串
\b 匹配单词边界,匹配单词的开头和结尾。
\B 匹配一个非单词边界
\d 匹配一个数字,等价于[0-9]
\D 匹配一个数字,等价于[^0-9]
\w 匹配一个单字字符(字母、数字或者下划线)等价于[A-Za-z0-9_],例如, /\w/ 匹配 "apple," 中的 'a',"$5.28,"中的 '5' 和 "3D." 中的 '3'。 \W匹配一个非单字字符。等价于[^A-Za-z0-9_],例如, /\W/ 或者 /[^A-Za-z0-9_]/ 匹配 "50%." 中的 '%'。
\W 匹配一个非单字字符。等价于[^A-Za-z0-9_],例如, /\W/ 或者 /[^A-Za-z0-9_]/ 匹配 "50%." 中的 '%'。
^ 匹配字符串的开始用在[]括号里面表示排除,/^A/ 并不会匹配 "an A" 中的 'A',但是会匹配 "An E" 中的 'A'。
$ 匹配字符串的结束。例如,/t$/ 并不会匹配 "eater" 中的 't',但是会匹配 "eat" 中的 't'。 QQ号必须为5位到12位数字时,可以使用:^\d{5,12}$

我们发现\W加大写字母都是表示相反的意思。

2.分组符([],(),{});

字符 含义
() 如果想要重复多个字符该怎么办?你可以用小括号来指定子表达式(也叫做分组),然后你就可以指定这个子表达式的重复次数了。eg: (\d{1,3}\.){3}\d{1,3}是一个简单的IP地址匹配表达式。要理解这个表达式,请按下列顺序分析它:\d{1,3}匹配1到3位的数字,(\d{1,3}\.){3}匹配三位数字加上一个英文句号(这个整体也就是这个分组)重复3次,最后再加上一个一到三位的数字(\d{1,3})。
[] 代表一个字符集合。匹配方括号的中任意字符,包括转义序列。你可以使用破折号(-)来指定一个字符范围。对于点(.)和星号(*)这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义,不过转义也是起作用的。例如,[abcd] 和[a-d]是一样的。他们都匹配"brisket"中得‘b',也都匹配“city”中的‘c'。/[a-z.]+/ 和/[\w.]+/都匹配“test.i.ng”中得所有字符。
{} 表示量词的范围的。

3.修饰符(i,g,m);

字符 含义
i 忽略大小写
g 执行全局匹配
m 执行多行匹配

4.量词(*,?,+,-,{n,m},?=n,?!=n);

字符 含义
* 匹配任意次,.*连在一起就意味着任意数量的不包含换行的字符。等价于{0,}
+ 匹配前面一个表达式1次或者多次。等价于 {1,}。
? 匹配前面一个表达式0次或者1次。等价于 {0,1}。
{n,m} 匹配n到m次
x(?=y) 匹配'x'仅仅当'x'后面跟着'y'.这种叫做正向肯定查找。 例如,/Jack(?=Sprat)/会匹配到'Jack'仅仅当它后面跟着'Sprat'。/Jack(?=Sprat|Frost)/匹配‘Jack'仅仅当它后面跟着'Sprat'或者是‘Frost'。但是‘Sprat'和‘Frost'都不是匹配结果的一部分。
x(?!y) 匹配'x'仅仅当'x'后面不跟着'y',这个叫做正向否定查找。 例如,/\d+(?!\.)/匹配一个数字仅仅当这个数字后面没有跟小数点的时候。正则表达式/\d+(?!\.)/.exec("3.141")匹配‘141'但是不是‘3.141'

实例解析:

var reg = /\(?0\d{2}[) -]?\d{8}/

“(”和“)”也是元字符,后面的分组节里会提到,所以在这里需要使用转义。
这个表达式可以匹配几种格式的电话号码,像(010)88886666,或022-22334455,或02912345678等。我们对它进行一些分析吧:首先是一个转义字符\(,它能出现0次或1次(?),然后是一个0,后面跟着2个数字(\d{2}),然后是)或-或空格中的一个,它出现1次或不出现(?),最后是8个数字(\d{8})。

以下通过实例来讲解RegExp:

需求一:在一句话英文中匹配一个hi的单词。

var str = 'Hi RegExp I love you so much Hi Hi hi';
var reg = new RegExp("\\bhi\\b","gi");//g是一个修饰符,表示全局匹配。\b是一个元字符,代表单词边界,匹配单词的开头和结尾。
//直接量语法:
reg2 = /\bhi\b/gi;
console.log(str.match(reg2));//['hi','hi','hi','hi']
//升级
//匹配hi后面不远处跟着一个lucy
var strlc = /\bhi\b.*\blucy\b/;
var luch = 'hi welcome to beijing lucy!!!';
console.log(luch.match(strlc));

需求二:在一句话英文中匹配一个hi的单词。

var reg = /0\d\d\d-\d\d\d\d\d\d\d\d/;//\d代表一个数字,等价于[0-9],\D匹配一个非数字字符,等价于[^0-9]
var tel = "0123-887523146";
console.log(tel.match(reg));//0123-88752314;
//这个连续写多次的方法很笨哎,所以引进了变量。
regTel = /0\d{3}-\d{8}/;
console.log(tel.match(regTel));//0123-88752314;

需求三:写一个清除字符串前后空格的正则表达式。

String.prototype.trim = function(){return this.replace(/(^\s*)|(\s*$)/g, "");}
var str2 = " hi space "//这里前后共有两个空格
console.log(str2.length);//14
console.log(str2.trim().length);//8
console.log(str2.trim());//hi space

需求四:匹配一个邮箱。

var eReg = /\S*@\S*\.\S*/;
console.log(eReg.test('873619879@qq.com'))//true

参考文章:

Javascript 相关文章推荐
几个有趣的Javascript Hack
Jul 24 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
js控制淡入淡出示例代码
Nov 12 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
ES6教程之for循环和Map,Set用法分析
Apr 10 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
js实现简单掷骰子小游戏
Oct 24 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
JavaScript使用math.js进行精确计算操作示例
Jun 19 #Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 #Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 #Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
Jun 19 #Javascript
Vue中"This dependency was not found"问题的解决方法
Jun 19 #Javascript
Vue.js 2.x之组件的定义和注册图文详解
Jun 19 #Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 #Javascript
You might like
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
Laravel5中Cookie的使用详解
2017/05/03 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
2017/05/22 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
2018/12/11 Javascript
node.js命令行教程图文详解
2019/05/27 Javascript
Vue配置marked链接添加target="_blank"的方法
2019/07/19 Javascript
解决Vue的项目使用Element ui 走马灯无法实现的问题
2020/08/03 Javascript
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
Python读取excel指定列生成指定sql脚本的方法
2018/11/28 Python
在pytorch 中计算精度、回归率、F1 score等指标的实例
2020/01/18 Python
django template实现定义临时变量,自定义赋值、自增实例
2020/07/12 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
运动会800米加油稿
2014/02/22 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
部门经理助理岗位职责
2015/04/13 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
工程主管竞聘书
2015/09/15 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript
MongoDB数据库部署环境准备及使用介绍
2022/03/21 MongoDB