学习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获取表格内指定单元格html内容的方法
Mar 31 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
Mar 02 Javascript
js制作支付倒计时页面
Oct 21 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 Javascript
vue中是怎样监听数组变化的
Oct 24 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使用header()输出图片缓存实例
2014/12/09 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
全面了解PHP中的全局变量
2016/06/17 PHP
使用Git实现Laravel项目的自动化部署
2019/11/24 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
javascript怎么禁用浏览器后退按钮
2014/03/27 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
Angular使用动态加载组件方法实现Dialog的示例
2018/05/11 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
JavaScript如何实现元素全排列实例代码
2019/05/14 Javascript
微信h5静默和非静默授权获取用户openId的方法和步骤
2020/06/08 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
vue 授权获取微信openId操作
2020/11/13 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
Python 使用类写装饰器的小技巧
2018/09/30 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
canvas绘制表情包的示例代码
2018/07/09 HTML / CSS
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
C#怎么让一个窗口居中显示?
2015/10/20 面试题
自我评价的写作规则
2014/01/06 职场文书
保险经纪人求职信
2014/03/11 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
2014最新自愿离婚协议书范本
2014/11/19 职场文书
我是特种兵观后感
2015/06/11 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
Python Django 后台管理之后台模型属性详解
2021/04/25 Python
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python