js中的正则表达式

  • 时间:2018-06-06 01:59 作者:PHP爱好者 来源:PHP爱好者 阅读:140
  • 扫一扫,手机访问
摘要:正则在平常工作中使用的非常多, 最开始接触正则的时候感觉这个东东好难记啊,最近把正则的内容整理了一下,写成以下文章。先给大家详情一个在线解析正则的网站,来帮助我们了解正则,特别是复杂的正则表达式,非常好使用http://www.regexper.com比方/^@[a-zA-Z]d+@$/,解析之后图

正则在平常工作中使用的非常多, 最开始接触正则的时候感觉这个东东好难记啊,最近把正则的内容整理了一下,写成以下文章。

先给大家详情一个在线解析正则的网站,来帮助我们了解正则,特别是复杂的正则表达式,非常好使用

http://www.regexper.com

比方/^@[a-zA-Z]d+@$/,解析之后图形帮助了解如下:

js中的正则表达式

什么是正则

正则表达式是使用于匹配字符串中字符组合的模式。主要应使用于正则对象的test和esec方法,以及字符串的search、split、match、replace中。

创立正则

字面量创立

var reg = /pattern/flag;

每个正则表达式都能带有一个或者多个(也能不带)表明正则表达式行为的标志

js中的正则表达式

构造函数创立

在js中提供了一个内置构造函数RegExp来创立一个正则对象

var reg = new RegExp(pattern [, flags]);

var reg = /[ab]c/g;

// 等价于

var reg = new RegExp("[ab]c", g);

正则表达式中的特殊字符

元字符

元字符是在正则表达式中有特殊含义的非字母字符,js中正则表达式元字符包括:

? + * ^ $ . | ( ) [ ] { }

由于这些字符在正则表达式中具备特殊含义,所以假如要想在字符串中匹配这些字符,就必需对它们进行转义.

// 匹配字符串中的ac或者者bc

var reg = /[ab]c/;

// 假如要匹配字符串的"[ab]c", 需要对[]进行转义

var reg = /\[ab\]c/;

注意:

另外需要注意的是,因为用构造函数创立正则,pattern参数必需为字符串,所有元字符假如需要在字符串中匹配这个字符,需要进行双重转义

var reg = /\[ab\]c/g;

假如用构造函数创立正则表达式,应该写成:

var reg = new RegExp("\\[ab\\]c", g);

字符集合

我们能用[]来构建一个简单的类[xyz],类指符合某些特性的对象,是一个泛指,并不是指某个字符,表示匹配方括号的中任意字符,对于点(.)和星号(*)这样的特殊符号在一个字符集中没有特殊的意义。他们不必进行转义,不过转义也是起作使用的。

字符含义

[xyz]匹配方括号的中任意字符

var reg = /[abc]/g;

var reg2 = /[abc.]/g; // 字符集合中的.

var reg3 = /[abc\.]/g; // 字符集合中转义的.

var str = 'a1b2c3';

var str2 = 'a1b2c3d.';

var res = str.replace(reg, 'X');

var res2 = str2.replace(reg2, 'X');

var res3 = str3.replace(reg3, 'X');

console.log(res); // X1X2X3

console.log(res2); // X1X2X3dX

console.log(res3); // X1X2X3dX

字符集合取反

字符含义

[^xyz]匹配任何没有包含在方括号中的字符

var reg = /[^abc]/g;

var str = 'abcdefg';

var res = str.replace(reg, 'X');

console.log(res); // abcXXXX

范围类

在字符集合中能用(-)来指定一个字符范围, 如[a-z],表示匹配从a到z的任意字符

var reg = /[a-z]/g;

var str = 'a1b2c3d4e5F6';

var res = str.replace(reg, 'X');

console.log(res); // X1X2X3X4X5F6

在范围类[]中能连写,好像时匹配大小写,[a-zA-Z]

var reg = /[a-zA-Z]/g;

var str = 'a1b2c3d4e5F6';

var res = str.replace(reg, 'X');

console.log(res); // X1X2X3X4X5X6

预约义类

正则表达式提供了预约义类,来匹配常见的字符类,不需要都通过字符集合去定义正则表达式

字符等价类含义

.[^\n\r]匹配除回车符合换行符之外的任何单个字符

\d[0-9]数字字符

\D[^0-9]非数字字符

\s[\t\n\\x0B\f\r]空白符

\S[^\t\n\\x0B\f\r]非空白符

\w[a-zA-Z_]单词字符(字母、数字、下划线)

\W[^a-zA-Z_]非单词字符

边界

正则还提供了边界匹配符

字符含义

^匹配输入的开始

$匹配输入的结尾

\b单词边界

\B非单词边界

// ^的应使用

var reg = /^@./g

var str = '@123abc@';

var res = str.replace(reg, 'X');

console.log(res); // X23abc

// $的应使用

var reg2 = /^.@$/g;

var str2 = '@123abc@';

var res2 = str2.replace(reg2, 'X');

console.log(res2); // 123abX

// \b的应使用

var reg3 = /\bis\b/g;

var str3 = 'this is javaScript';

var res3 = str3.replace(reg3, 'X');

console.log(res3); // this X javaScript

正则的m标志应使用

var reg = /^@./g;

var str = `@abc

@123

@XYZ

`

var res = str.replace(reg, 'X');

// 由于即便字符串看上去换行,本质上还是少量换行符,只有结尾和结束

console.log(res); // Xbc

@123

@XYZ

当正则表达式用m标志的时候,在一行文本末尾结束的时候,还会去匹配下一行能否存在与模式匹配的项,例子如下:

var reg = /^@./gm;

var str = `@abc

@123

@XYZ

`

var res = str.replace(reg, 'X');

console.log(res); // Xbc

X23

XYZ

量词

字符含义

?匹配前面一个表达式0次或者者1次(至多出现一次)

+匹配前面一个表达式1次或者者屡次(至少出现一次)

*匹配前一个表达式0次或者屡次(任意次)

{n}n是一个正整数,匹配了前面一个字符恰好发生了n次

{n,m}n 和 m 都是整数。匹配前面的字符至少n次,最多m次。假如 n 或者者 m 的值是0, 这个值被忽略。

{n,}匹配前面字符n此或者者更屡次(至少出现n次

贪婪模式

贪婪模式是让正则表达式尽可可以多的匹配

var reg = /\d{2,5}/;

var str = '12345678';

var res = str.replace(reg, 'X');

console.log(res); // X678

非贪婪模

非贪婪模式是让正则表达式尽可可以少的匹配,一旦匹配成功不在继续匹配,做法是在量词后面加上?就可

var reg = /\d{2,5}?/

var str = '12345678';

var res = str.replace(reg, 'X');

console.log(res); // X345678

分组

用括号()进行分组

量词不作使用于紧挨着的某个字符,用/(x)/匹配 'x',并且记住匹配项,括号被称为补货括号

var reg = /([a-zA-Z]\d)/g;

var str = 'a1bbc3D4efg';

var res = str.replace(reg, 'X');

console.log(res); // XbbXXefg

用在线解析正则工具如下图:

js中的正则表达式

另外能增加量词

var reg = /(abc){3}/g;

var str = 'abcabcabcabc';

var res = str.replace(reg, 'X');

console.log(res); // Xabc

用或者' | '进行分组

var reg = /apple|pear/g

var str = 'appleappleHpearpear';

var res = str.replace(reg, 'X');

console.log(res); // XXHXX

var reg2 = /appl(e|p)ear/g;

var str2 = 'appleearHapplpear'

var res2 = str2.replace(reg2, 'X');

console.log(res2); // XHX

在线解析上面代码的reg和reg2如下:

reg:

js中的正则表达式

reg2:

js中的正则表达式

捕获匹配到的分组内容

在replace替换环节,能用$1、$2、$3...$n等捕获分匹配到的分组

比方想把'25/12/2016'转换成'2016-12-25':

var reg = /(\d{2})\/(\d{2})\/(\d{4})/;

var str = '25/12/2016';

var res = str.replace(reg, '$3-$2-$1');

console.log(res); // 2016-12-25

忽略分组

假如不希望捕获分组,只要要在分组内加上(?:)即可以

var reg = /(?:\d{2})\/(\d{2})\/(\d{4})/;

var str = '25/12/2016';

var res = str.replace(reg, '$3-$2-$1');

此时$2为2016,$1为12,而$3捕获不到,按普通字符串显示

console.log(res); // $3-2016-12

正向一定查找

x(?=y)

匹配x,并且x后必需跟着y,这就是正向一定查找

var reg = /\w(?=\d)/g;

var str = 'a1b2ccd4';

var res = str.replace(reg, 'X');

console.log(res); // X1X2ccX4

正向否定查找

匹配x,并且x后必需不跟着y,这就是正向否定查找

var reg = /[a-z](?!\d)/g;

var str = 'a1b2ccd4';

var res = str.replace(reg, 'X');

console.log(res); // a1b2XXd4

正则对象属性和方法

属性

js中的正则表达式

属性皆为只读,不可修改

var reg = /\[abc\]/;

console.log(reg.ignoreCase) // false;

console.log(reg.global) // false;

console.log(reg.multiline) // false;

reg.ignoreCase = true;

reg.global = true;

reg.multiline = true;

console.log(reg.ignoreCase) // false;

console.log(reg.global) // false;

console.log(reg.multiline) // false;

还是以上代码看一下source属性

console.log(reg.source) // \[abc\]

假如用构造函数创立正则对象,再来看一下source属性

var reg = new RegExp("\\[abc\\]"); //需要对元字符进行双重转义

console.log(reg.source); // \[abc\]

通过以上比照可知,source属性是字面量形式创立正则对象所有的字符串

方法

RegExp.prototype.test()

test() 方法执行一个检索,使用来查看正则表达式与指定的字符串能否匹配。匹配到返回 true,否则返回false。

语法

regexObj.test(str)

var reg = /\w/;

var str = 'ab';

console.log(reg.test(str)); // true

console.log(reg.test(str)); // true

console.log(reg.test(str)); // true

注意

当正则表达式用全局模式时,lastIndex属性会影响test()方法的返回值,看下面例子

var reg = /\w/g;

var str = 'ab';

console.log(reg.test(str)); // true

console.log(reg.test(str)); // true

console.log(reg.test(str)); // false

console.log(reg.test(str)); // true

为什么会出现这种现象呢,是由于正则表达式执行test方法时,每次都会把结果作使用到操作的正则实例上,因为是全局匹配,第一次匹配到之后reg的lastIndex属性为1,继续匹配,此时从lastIndex的位置开始匹配,即从b开始,结果又匹配到,此时lastIndex属性为2,当继续匹配时,从2开始匹配,没有匹配到,此时返回false,lastIndex被重置为0,所以第4次执行console.log(reg.test(str))就会从新从0开始,所以返回值为true。结合while循环来说明一下:

var reg = /\w/g;

var str = 'ab';

while(reg.test(str)){

console.log(reg.lastIndex); // 循环执行两次,分别打印出1, 2

}

RegExp.prototype.exec()

exec() 方法在一个指定字符串中执行一个搜索匹配.

语法

regexObj.exec(str)

返回值:

1.假如匹配失败,返回 null。

2.假如匹配成功,exec() 方法返回一个数组,并升级正则表达式对象的属性,一般来说主要是lastIndex属性值的升级。返回的数组将完全匹配成功的文本作为第一项,将正则括号里匹配成功的作为数组填充到后面,返回值尽管是Array实例,但是包含了index和input属性

index: 表示匹配项在字符串中的位置,也就是匹配项第一个字符的位置

input: 表示应使用正则表达式的字符串

非全局调使用

返回数组内容包括:

第一个元素是与正则表达式相匹配的文本

第二个元素是与正则对象第一个子表达式相匹配的文本,也就是第一个分组(假如有的话)

第三个元素是与正则对象第二个子表达式相匹配的文本,也就是第而个分组(假如有的话),以此类推

var reg = /\d(\w)(\w)\d/;

var str = '@1bb2c3dd4f';

var res = reg.exec(str);

console.log(reg.lastIndex); // 0 非全局模式忽略lastIndex属性

console.log(res.index); // 1

console.log(res.input); // @1ab2c3dd4f

console.log(res); // ["1ab2", "a", "b"]

全局调使用

var reg = /\d(\w)(\w)\d/g;

var str = '@1bb2c3dd4f';

var res = reg.exec(str);

console.log(reg.lastIndex); // 5 非全局模式忽略lastIndex属性

console.log(res.index); // 1

console.log(res.input); // @1ab2c3dd4f

console.log(res); // ["1ab2", "a", "b"]

console.log(reg.lastIndex);

用while循环加深一下了解

var reg = /\d(\w)(\w)\d/g;

var str = '@1bb2c3dd4f';

while(reg.exec(str)) {

console.log(reg.lastIndex, res.index, res);

// 打印两次结果分别为

// 5, 1, ["1bb2", "b", "b"]

// 10, 6, ["3dd4", "d", "d"]

}

字符串对象方法

String.prototype.search()

方法执行正则表达式和 String对象之间的一个搜索匹配,假如匹配成功,返回正则表达式在字符串中初次匹配项的索引,否则返回-1。

语法:

str.search(regexp)

假如传入一个非正则表达式对象,则会用 new RegExp(obj) 隐式地将其转换为正则表达式对象。

String.prototype.match()

使用于搜索字符串,找到一个或者多个与regexp匹配的文本

语法:

str.match(regexp);

返回值:

一个包含了整个匹配结果以及任何括号捕获的匹配结果的 Array ;假如没有匹配项,则返回 null。regexp能否有g标志对返回值有很大影响。

非全局调使用(不包含g标志)

返回值和RegExp.prototype.exec()方法一样,就不细说了。

全局调使用(包含g标志)

没有找到任何匹配的字符串,返回null

假如找到了一个或者多个匹配的字符串,则返回一个数组,存放字符串中所有匹配的字符串,不包含捕获内容,也不具备index和input属性。

var reg = /\d(\w)\d/g;

var str = '1a2b3c4d';

var res = str.match(reg);

console.log(res); // ["1a2", "3c4"]

console.log(res.index); // undefined

console.log(res.input); // undefined

String.prototype.split()

split() 方法用指定的分隔符字符串将一个String对象分割成字符串数组

语法:

str.split([separator[, limit]]);

js中的正则表达式

separator 参数

当separator为字符串时,其实也是默认转成正则去执行

var str = 'a, b, c, d';

var arr = str.split(',');

var arr2 = str.split(/,/);

console.log(arr); // ["a", " b", " c", " d"]

console.log(arr2); // ["a", " b", " c", " d"]

separator带捕获括号

假如 separator 包含捕获括号(capturing parentheses),则其匹配结果将会包含在返回的数组中。

var str = 'a1b2c3d';

var arr = str.split(/(\d)/);

console.log(arr); // ["a", "1", "b", "2", "c", "3", "d"]

limit参数

限制返回值中分割元素数量

var str = 'a b c d e';

var arr = str.split(' ', 3);

console.log(arr); // ["a", "b", "c"]

String.prototype.replace()

replace() 方法返回一个由替换值替换少量或者所有匹配的模式后的新字符串。模式能是一个字符串或者者一个正则表达式, 替换值能是一个字符串或者者一个每次匹配都要调使用的函数。

注意: 原字符串不会改变。

语法:

str.replace(regexp|substr, newSubStr|function)

String.prototype.replace(substr, newSubStr)

var str = 'a1b2c3d';

var resStr = str.replace('1', 'X');

console.log(resStr); //

String.prototype.replace(regexp, newSubStr)

var str = 'a1b2c3d';

var resStr = str.replace(/\d/g, 'X');

console.log(resStr); // aXbXcXd

String.prototype.replace(regexp, function)

function会在每次匹配替换的时候调使用,包含四个可选参数

匹配到的字符串

正则表达式分组内容,没有分组就没有该参数

匹配项在字符串中的index

原字符串

例子:

比方要把'a1b2c3'替换后的结果为'a2b3c4'

var str = 'a1b2c3';

var resStr = str.replace(/\d/g, function(matchStr, index, originStr) {

// 此时正则表达式中无捕获,function中则无分组参数

return parseInt(matchStr) + 1;

});

console.log(resStr); // a2b3c4

当正则表达式中有捕获时,再看一下另外一个例子:

var str = 'a1b2c3d4e';

var resStr = str.replace(/(\d)(\w)(\d)/g, function(matchStr, group1, group2, group3, index, originStr) {

// 会执行两次回调,打印结果分别如下

console.log(matchStr) // 1b2 3d4

console.log(group1); // 1 3

console.log(group2); // b d

console.log(group3); // 2 4

return group1 + group3; //把匹配到的文本替换成group1 + group3字符串拼接后的值

});

// 把匹配到的1b2替换成group1 + group3(12), 3d4替换成(34)

console.log(resStr); // a12c34e 把匹配到的1b2替换成group1 + group3(12)

感觉把正则搞清楚还是很爽滴。

  • 全部评论(0)
最新发布的资讯信息
【系统环境|】学习web前端开发是正确的选择(2019-09-15 16:55)
【系统环境|】干货整理!零基础html5网站开发学习步骤方法(保存不后悔)(2019-09-10 16:27)
【系统环境|】「前端入门」前端基本概念(2019-09-07 21:36)
【系统环境|】小白入门学习web前端,这些干货不能少(2019-09-05 20:59)
【系统环境|】不是计算机专业,哪个专业更适合学习web前端(2019-09-03 20:31)
【系统环境|】入行web前端开发可以做什么工作(2019-09-02 20:51)
【系统环境|】什么是Web前端呢?为什么说web前端开发人员的薪资高、前景好呢?(2019-08-31 20:55)
【系统环境|】2019年Web前端开发的8个趋势,你知道几个?(2019-08-29 16:23)
【系统环境|】学习web前端,掌握这些,才有底气跟面试官提薪资(2019-08-28 15:23)
【系统环境|】Web前端为什么那么好(2019-08-27 18:20)
手机二维码手机访问领取大礼包
返回顶部