学习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 相关文章推荐
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
Dec 11 Javascript
js中的cookie的读写操作示例详解
Apr 17 Javascript
jquery显示隐藏input对象
Jul 21 Javascript
Jquery代码实现图片轮播效果(一)
Aug 12 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 Javascript
JS中超越现实的匿名函数用法实例分析
Jun 21 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
极典R601SW收音机
2021/03/02 无线电
解析php 版获取重定向后的地址(代码)
2013/06/26 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
Javascript 设计模式(二) 闭包
2010/05/26 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
AngularJS入门教程之Select(选择框)详解
2016/07/27 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
详解Webpack + ES6 最新环境搭建与配置
2018/06/04 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
python自动化测试实例解析
2014/09/28 Python
Python的时间模块datetime详解
2017/04/17 Python
python 实现批量xls文件转csv文件的方法
2018/10/23 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python计算二维矩形IOU实例
2020/01/18 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
网络技术支持面试题
2013/04/22 面试题
外贸学院会计专业应届生求职信
2013/11/14 职场文书
医学生自我评价
2014/01/27 职场文书
高中体育教学反思
2014/01/29 职场文书
物理专业本科生自荐信
2014/01/30 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
python中的getter与setter你了解吗
2022/03/24 Python