学习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 相关文章推荐
解决FLASH需要点击激活的代码
Dec 20 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
Nov 09 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
May 29 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
简单了解JavaScript中的执行上下文和堆栈
Jun 24 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 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+java实现自动新闻滚动窗口
2006/10/09 PHP
PHP Token(令牌)设计
2008/03/15 PHP
微信公众平台天气预报功能开发
2014/07/06 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
浅析PHP中json_encode与json_decode的区别
2020/07/15 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
2012/09/21 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
JavaScript保存并运算页面中数字类型变量的写法
2015/07/06 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
js闭包用法实例详解
2016/12/13 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
Angular实现的简单定时器功能示例
2017/12/28 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
GOJS+VUE实现流程图效果
2018/12/01 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
python字典基本操作实例分析
2015/07/11 Python
python 3利用BeautifulSoup抓取div标签的方法示例
2017/05/28 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
基于Django统计博客文章阅读量
2019/10/29 Python
解决Python二维数组赋值问题
2019/11/28 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
CSS3常用的几种颜色渐变模式总结
2016/11/18 HTML / CSS
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
上海雨人软件技术开发有限公司测试题
2015/07/14 面试题
文明学生标兵事迹
2014/01/21 职场文书
导游词之青城山景区
2019/09/27 职场文书
python多线程方法详解
2022/01/18 Python
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript