JavaScript中的正则表达式

Javascript的正则表达式是前端中比较重要的部分，正则表达式主要用于字符串处理，表单验证等场合，实用高效，文章主要对JavaScript中的正则的学习与总结

正则表达式的定义

正则表达式：是一个描述字符模式的对象，JavaScrip中正则表达式用RegExp对象表示，可以使用RegExp构造函数来创建正则对象

正则表达式的创建

1.字面量创建

var reg = /[a-z]/;

2.构造函数的创建

var reg = new RegExp('[a-z]');

直接量字符

字符	描述
字母和数字	字母数字的本身
o	空字符
	制表符
	换行符
v	垂直制表符
f	换页符
	回车符
cX	控制字符

字符类

字符类

将直接量字符放入方括号内就组成了字符类

console.log(/[abc]/.test("a"));//true
console.log(/[abc]/.test("b"));//true
console.log(/[abc]/.test("c"));//true

否定类字符

定义否定类字符时，将一个“^”符号作为方括号内的第一个字符

console.log(/[^abc]/.test("a"));//false
console.log(/[^abc]/.test("b"));//false
console.log(/[^abc]/.test("1111"));//true

范围字符

利用 "-" 表示范围字符，可以匹配某个范围内的字符

 console.log(/[0-9]/.test("5"));//true
 console.log(/[0-9]/.test("a"));//false
 console.log(/[a-z]/.test("b"));//true
 console.log(/[a-z]/.test("B"));//false
 console.log(/[A-Z]/.test("B"));//true
 console.log(/[A-Z]/.test("b"));//false

预定义的字符类

字符	等同于	描述
[...]		放括号内的任意字符
[^...]		不在方括号内的任意字符
.	[^ ]	除换行符与结束符之外的任意字符
w	[a-zA-Z0-9]	单词字符（所有的字母）
W	[^a-zA-Z0-9]	非单词字符
s		空白字符
S		非空白字符
d	[0-9]	数字字符
D	[^0-9]	非数字字符
[]		退格符

量词

在我们上面认识到的正则语法当中，我们可以把两位字母描述为/ww/，三位字母描述为/www/，但如果要描述很多位字母怎么办？描述为/w....../

天呐！这是要逼死我们的节奏啊

因此量词就是处理这些数量关系操作的它用来修饰前一位字符出现的次数

字符	描述
{n,m}	至少出现n次但不超过m次
{n,}	至少出现n次或更多次
{n}	出现n次
？	出现0次或者1次，等价于{0,1}
+	出现1次或者多次，等价于{1, }
*	出现0次或者多次，等价于{0，1}

console.log(/d{2,4}/.test('111'));//true
console.log(/w{3}d?/.test('aaa'));//true
console.log(/w{3}d?/.test('aaa1'));//true

注意：在使用 " * " 和 " ? " 时由于这些字符有可能匹配0个字符，因此他们允许什么都不匹配，例如，正则表达式 /a*/与"bbbb"匹配，因为它含有0个a

贪婪量词

我们上面列出的量词都是贪婪量词，

它会尽可能多地匹配，默认先匹配整个字符串，然后不匹配在缩小范围继续匹配

非贪婪量词

在上面列出的量词后面加个问号（" ?? " " +? "）

总是从第一个字符开始向后扩展范围匹配

//非贪婪模式
console.log(/a*?bb/g.exec("abbaabbaaabbb")); //abb
//贪婪模式
var pattern = /a*bb/g;
var text = 'aabbaabbaaabbbaabbb';
var result;
while((result = pattern.exec(text))!=null){
    console.log(result); //aabb aabb aaabb aabb
}

选择，分组与引用

选择

字符 " | " 用于分隔供选择的字符

console.log(/ab|cd|ef/.test('ab'));//true
console.log(/ab|cd|ef/.test('cd'));//true
console.log(/ab|cd|ef/.test('ef'));//true

分组

"()" 用于分组，把单独的项组合成子表达式

console.log(/java(script)?/.test('java'));//true
console.log(/java(script)?/.test('javascript'));//true

引用

引用包含匹配模式引用，匹配的内容引用

" "后面加数字用于模式的引用

" $ " 后面加数据用于匹配的内容引用

console.log(/(d)([a-z])1/.test('1a1'));//true
console.log(RegExp.$1);//1
console.log(RegExp.$2);//a

只组合并不创建引用

并不是所有的分组都能创建引用，" (?: ) "符号只用来分组而不创建引用，如下： 1 不是引用的 d 而是 [a-z]

console.log(/(?:d)([a-z])1/.test('1aa'));//true
console.log(/(?:d)([a-z])1/.test('1a1'));//false

位置字符

字符	描述
^	字符串的开头（要单独存在不能放在[ 的后面）
$	字符串的结尾
	单词边界（[a-zA-Z_0-9]之外的字符）注意[]为退格符
B	非单词边界
(?=n)	零宽正向断言匹配后面为n 的字符
(?!n)	零宽负向断言匹配后面不能有n 的字符

console.log(/^java$/.test('java'));//true
console.log(/^java$/.test('javascript'));//false
console.log(/^java$/.test('cjavascript'));//false
console.log(/java(?=script)/.test('javascript'));//true
console.log(/java(?=script)/.test('javaislan'));//false
console.log(/java(?!script)/.test('javascript'));//false
console.log(/java(?!script)/.test('javaislan'));//true

修饰符

正则表达式的修饰符是放在 "/" 之外的，JavaScript 支持三个修饰符

字符	描述
i	执行不区分大小写
g	执行全局匹配（查找所有匹配而不是在匹配到第一个就停止）
m	执行多行匹配

console.log(/JAVA/i.test('java'));//true

支持正则的String对象方法

search()：

用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回第一个与之匹配的子字符串的位置

console.log('JAVA is not javascript'.search(/java/i));//0

注意：search()方法不支持全局检索，因为他会忽略正则表达式参数中的修饰符g

replace()：

用于检索与替换操作，接收两个参数，第一个是正则表达式，第二个是要进行替换的字符串，该方法可以全局匹配

console.log('JAVA is not JAVAscript'.replace(/java/i, 'java'));//java is not JAVAscript
console.log('JAVA is not JAVAscript'.replace(/java/ig, 'java'));//java is not javascript

回忆上面我们所提到的正则的引用 $加数字可以保存分组的匹配的内容，这里我们就可以用到

console.log('JAVA is not javascript'.replace(/(JAVA)/, '"$1"'));//"JAVA" is not javascrip

match()：

用于检索字符串中与正则表达式匹配的结果，参数必须是正则表达式，返回一个由匹配结果组成的数组

在match方法中如果正则表达式设置修饰符g，则返回的数组是字符串中所有匹配的结果

 console.log('JAVA is not JAVAscript'.match(/java/ig));//['JAVA', 'JAVA']

如果没有设置g，match()方法不会进行全局检索，只会检索第一个匹配，但它也是返回一个数组，此时数组的第一个元素就是匹配的结果，剩下的元素为圆括号包含的子表达式匹配的结果

 console.log('1a2b'.match(/(d)([a-z])/)); //['1a', '1', 'a']

split()：

用于把一个字符串分割成数组，参数为字符串或这个正则表达式

console.log('a,b,c,d'.split(','));//["a", "b", "c", "d"]
console.log('a, b, c, d'.split(/,s*/));//["a", "b", "c", "d"]

JavaScript中的 RegExp 对象

RegExp() 构造函数用于创建新的RegExp 对象。构造函数接受两个参数，第一个是表达式的主体部分，第二个是表达式的修饰符

//在构造函数中必须用  字符作为前缀进行转义
var regExp = new RegExp('\w*', 'g');

RegExp 对象的属性

RegExp 对象包含5个属性

属性	描述
global	只读的布尔值，用于说明表达式是否带有修饰符g
ignoreCase	只读的布尔值，用于说明表达式是否带有修饰符i
lastIndex	是一个读/写的整数，默认值为0，如果表达式带修饰符g,lastIndex的值会被设置为下次检索的开始位置（只有exec()和test()方法才会用到）
multiLine	只读的布尔值，用于说明表达式是否带有修饰符m
source	只读的字符串，包含表达式的文本

RegExp对象的方法

exec()：

用于检索字符串中正则表达式的匹配，如果有匹配则返回该匹配的值，否则返回null

console.log(/java/i.exec('javaScript is not java'));//["java", index: 0, input: "javaScript is not java"]
console.log(/css/i.exec('javaScript is not java'));//null
console.log(/java/ig.exec('javaScript is not java'));//["java", index: 0, input: "javaScript is not java"]

上述代码可以看出exec() 只会返回一次匹配结果，在全局匹配模式下，exec方法会设置lastIndex 属性的值，exec()的下次检索会从lastIndex属性指示的字符处开始检索

var pattern = /java/ig;
var text = 'javaScript is not JAVA';
var result;
result = pattern.exec(text);
console.log(result);//["java", index: 0, input: "javaScript is not java"]
console.log(pattern.lastIndex);//4
result = pattern.exec(text);
console.log(result);//["JAVA", index: 18, input: "javaScript is not JAVA"]
console.log(pattern.lastIndex);//22

通常我们在用exec()检索字符串时，可以利用while循环

var pattern = /java/ig;
var text = 'javaScript is not JAVA';
var result;
while((result = pattern.exec(text))!==null){
    console.log(result);
}

test()：

用于检索字符串中是否匹配某个表达式，如果匹配返回true，否则返回false

console.log(/java/.test('javascript'));//true
console.log(/java/.test('script'));//true

JavaScript中的正则表达式

如果你觉得此文有帮助，就帮忙点个推荐把！