JavaScript中的正则表达式

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

正则表达式的定义

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

正则表达式的创建

1.字面量创建

var reg = /[a-z]/;

2.构造函数的创建

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

直接量字符

字符类

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

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

预定义的字符类

量词

在我们上面认识到的正则语法当中，我们可以把两位字母描述为/ww/，三位字母描述为/www/，但如果要描述很多位字母怎么办？描述为/w....../天呐！ 这是要逼死我们的节奏啊!因此量词就是处理这些数量关系操作的它用来修饰前一位字符出现的次数

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

位置字符

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 支持三个修饰符

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个属性

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

关注微信公众号：六小登登。领取全套学习资源