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 function代码
May 23 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
基于javascript实现tab选项卡切换特效调试笔记
Mar 30 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
关于不同页面之间实现参数传递的几种方式讨论
Feb 13 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 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
php下载远程文件类(支持断点续传)
2008/11/14 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
从零开始学YII2框架(五)快速生成代码工具 Gii 的使用
2014/08/20 PHP
php头像上传预览实例代码
2017/05/02 PHP
常用一些Javascript判断函数
2012/08/14 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
js登录弹出层特效
2014/03/07 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
jquery实现的点击翻书效果代码
2015/11/04 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
Vue框架TypeScript装饰器使用指南小结
2019/02/18 Javascript
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
python删除文件示例分享
2014/01/28 Python
python2.7读取文件夹下所有文件名称及内容的方法
2018/02/24 Python
Tensorflow使用tfrecord输入数据格式
2018/06/19 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
PyQt5.6+pycharm配置以及pyinstaller生成exe(小白教程)
2020/06/02 Python
python3.6.5基于kerberos认证的hive和hdfs连接调用方式
2020/06/06 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
法国在线药房:1001Pharmacies
2021/03/07 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
公开服务承诺制度
2014/03/26 职场文书
党员四风自我剖析材料
2014/10/07 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
写一个Python脚本自动爬取Bilibili小视频
2021/04/24 Python
MySQL系列之十二 备份与恢复
2021/07/02 MySQL