学习JavaScript正则表达式


Posted in Javascript onNovember 13, 2015

JavaScript正则表达式学习:

有个在线调试正则的工具。下面的所有示例代码,都可以在codepen上查看到。

1.创建正则表达式

var re = /ab+c/; //方式一 正则表达式字面量

var re = new RegExp("ab+c"); //方式二 RegExp对象的构造函

1)正则表达式字面量在脚本加载后编译。若你的正则表达式是常量,使用这种方式可以获得更好的性能。

2)使用构造函数,提供了对正则表达式运行时的编译。当你知道正则表达式的模式会发生改变, 或者你事先并不了解它的模式或者是从其他地方(比如用户的输入),得到的代码这时比较适合用构造函数的方式。

2.正则表达式中的特殊字符

\    ^    $    *    +    ?    .    (x)    (?:x)    x(?=y)    x(?!y)    x|y    {n}  

{n,m}    [xyz]    [^xyz]    [\b]    \b    \B    \cX    \d    \D    \f    \n    \r   

\s    \S    \t    \v    \w    \W    \n    \0    \xhh    \uhhhh   

3.正则表达式中的方法

有6个,分别是exec、test、match、search、replace和split

exec和test的语法都是regexObj调用,match、search、replace和split的语法都是string调用。

exec:

方法为指定的一段字符串执行搜索匹配操作。它的返回值是一个数组或者 null。语法如下:regexObj.exec(str)

示例代码:

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');
返回结果:

学习JavaScript正则表达式

test:

一个在字符串中测试是否匹配的RegExp方法,它返回true或false。语法如下:regexObj.exec(str) 

match:

一个在字符串中执行查找匹配的RegExp方法,它返回一个数组或者在未匹配到时返回null。

与exec略有不同,首先是调用方式,math是由字符串调用,而exec是由RegexObj调用。

其次,如果表达式中有“g”标记,那么返回一个匹配的字符串数组,如果没有就会和exec返回的一样。下面这个demo就是有“g”。语法如下:str.match(regexp)

示例代码:

var re = /quick\s(brown).+?(jumps)/ig;
var result = re.exec('The Quick Brown Fox Jumps Over The Lazy Dog');

返回结果:

学习JavaScript正则表达式

search:

一个在字符串中测试匹配的String方法,它返回匹配到的位置索引,或者在失败时返回-1。语法如下:str.search(regexp)

例如上面的示例代码如果是调用search,返回数据就是4。

replace:

一个在字符串中执行查找匹配的String方法,并且使用替换字符串替换掉匹配到的子字符串。语法如下:str.replace(regexp|substr,newSubStr|function[,flags])

var re = /(\w+)\s(\w+)/;
var str = "John Smith";
var result = str.replace(re, "$2, $1");

返回的结果将是:“Smith, John”

split:

一个使用正则表达式或者一个固定字符串分隔一个字符串,并将分隔后的子字符串存储到数组中的String方法。语法如下:str.split([separator[,limit]])

limit就是限制分割后的数组中的个数。下面的是一个demo,但是表达式中有一个是加了括号,一个没加,返回的数据是不一样的。

示例代码:

var re = /(\d)/;
var result = 'Hello 1 word. Sentence number 2.'.split(re);
console.log(result);
var re = /\d/;
var result = 'Hello 1 word. Sentence number 2.'.split(re);
console.log(result);

返回结果:

学习JavaScript正则表达式

4.正则表达式执行返回信息

var myRe = new RegExp("d(b+)d", "g");
var myArray = myRe.exec("cdbbdbsbz");
console.log(myArray);

代码中返回的结果如下:

学习JavaScript正则表达式

学习JavaScript正则表达式

5.正则表达式标志

学习JavaScript正则表达式

var re = /\w+\s/g;//表达式一
var re = new RegExp("\\w+\\s", "g");//表达式二
var str = "fee fi fo fum";
var myArray = str.match(re);
console.log(myArray);

表达式一和表达式二返回的结果是一样的。都是下面的那个数组:

学习JavaScript正则表达式

 以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
javascript判断数组内是否重复的方法
Apr 21 Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 Javascript
JS修改地址栏参数实例代码
Jun 14 Javascript
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 #Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 #Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 #Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
Nov 13 #Javascript
每天一篇javascript学习小结(Date对象)
Nov 13 #Javascript
有关Promises异步问题详解
Nov 13 #Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
Nov 13 #Javascript
You might like
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
如何使用PHP批量去除文件UTF8 BOM信息
2013/08/05 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
php文件缓存类汇总
2014/11/21 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
php metaphone()函数的定义和用法
2016/05/15 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
js Date自定义函数 延迟脚本执行
2010/03/10 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
JS原型链 详解及示例代码
2016/09/06 Javascript
Vue异步加载about组件
2017/10/31 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
vue中的inject学习教程
2019/04/24 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
python中正则的使用指南
2016/12/04 Python
理解Python中的绝对路径和相对路径
2017/08/30 Python
Python有序查找算法之二分法实例分析
2017/12/11 Python
Python+tkinter模拟“记住我”自动登录实例代码
2018/01/16 Python
python逆序打印各位数字的方法
2018/06/25 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
医学类导师推荐信范文
2013/11/19 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
文明礼仪主题班会
2015/08/13 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python