学习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 相关文章推荐
jquery 插件开发备注
Aug 27 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
ClearTimeout消除闪动实例代码
Feb 29 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
Javascript中for循环语句的几种写法总结对比
Jan 23 Javascript
angular第三方包开发整理(小结)
Apr 19 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
微信小程序获取用户openid的实现
Dec 24 Javascript
如何利用node转发请求详解
Sep 17 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
php url地址栏传中文乱码解决方法集合
2010/06/25 PHP
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP--用万网的接口实现域名查询功能
2012/12/13 PHP
PHP mkdir创建文件夹实现方法解析
2020/11/13 PHP
浅谈JavaScript之事件绑定
2013/07/08 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
javascript常见操作汇总
2014/09/03 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
ExpressJS入门实例
2015/01/14 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
js弹出窗口简单实现代码
2017/03/22 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
vue集成kindeditor富文本的实现示例代码
2019/06/07 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
python动态加载变量示例分享
2014/02/17 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python从单元素字典中获取key和value的实例
2018/12/31 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
django基于restframework的CBV封装详解
2019/08/08 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
党支部特色活动方案
2014/08/20 职场文书
如何写早恋检讨书
2014/09/10 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js