javascript ES6 全面提高：7. 正则表达式

Javascript全面提高

7. 正则表达式

学习正则表达式，使我们做表单验证更加轻松，做字符串替换更加简洁

正则表达式用于匹配字符串中字符组合的模式。
在javascript中正则表达式也是对象。

正则表达式的作用

正则表达式通常用来检索和替换符合规则的文本，如表单验证中的用户名设置规则、电话号验证、日期验证等，还可以用来过滤文本中的一些敏感词(替换)，也可以从字符串中检索出我们所需要的部分。

学习要求

• 实际开发中，一般复制写好的正则表达式，但要求会使用正则表达式并且根据当前所需情况修改正则表达式

正则表达式的创建

在JavaScript中可以通过两种方式创建正则表达式

1. 通过调用RegExp对象的构造函数创建
2. 通过字面量创建

通过RegExp；对象创建正则表达式

    let 变量名 = new RegExp(/表达式/);

通过字面量创建正则表达式

    let 变量名 = /表达式/;

测试正则表达式 test

• test()正则对象方法，用于检测字符串是否符合该规则，该对象会返回true或false，其参数是需测试的字符串

    re.test(string);

• re是创建的正则表达式
• string是要测试的文本字符串
• 该语句的作用是检测string文本是否符合我们所创建的re正则表达式规范

示例：

<script>
    // 正则表达式在代码中的使用
    // 1. 利用RegExp对象来创建正则表达式
    let re1 = new RegExp(/[1-9]/);

    // 2. 使用字面量来创建正则表达式
    let re2 = /[1-9]/

    // 3. test方法来检测字符串是否符合正则表达式规范
    console.log(re1.test(1)); //true
    console.log(re2.test(4)); //true
</script>

正则表达式中的特殊字符

边界符

正则表达式的边界符用来提示所要匹配的字符所处的位置，主要有两个字符

边界符	作用
^	匹配行首的字符串(以符合正则表达式的字符串开头)
$	匹配行尾的字符串(以符合正则表达式的字符串结尾)

    // 1. 只要包含182这个字符串都返回true
    let re1 = /182/;
    console.log(re1.test('18211110000')); // true
    console.log(re1.test('18318210000')); // true
    console.log(re1.test('18211110182')); // true

    // 2. 只有以123这个字符串开头的才会返回true
    let re2 = /^182/;
    console.log(re2.test('18211110000')); // true
    console.log(re2.test('18318210000')); // false
    console.log(re2.test('18311110182')); // false

    // 3。只有以123这个字符串结尾的才会返回true
    let re3 = /182$/;
    console.log(re3.test('18311110182')); // true
    console.log(re3.test('18211110000')); // false
    console.log(re3.test('18318210000')); // false

    // 只有以123这个字符串开头并且结尾，没有其他多余字符的才会返回t
    let re4 = /^182$/;
    console.log(re4.test('182')); // true
    console.log(re4.test('18211110182')); // false

字符类

字符类表示一系列可供选择的字符，只要匹配其中一个就可以

[]方括号

    /[abcde]/.test('afsg'); // true

[-] 方括号内部 范围符-

方括号内的-表示范围，[a-z]表示a-z26个字母都可以，
同理[A-Z]表示A-Z26个字母都可以、[0-9]表示0倒是9是个数字都可以

    /[a-z]/.test('b'); // true
    /[A-Z]/.test('B'); // true
    /[0-9]/.test(3); // true

[^] 方括号内部 取反符^

方括号内部加入^表示取反，只要匹配到包含在方括号内部的字符，都返回false

注意其与边界符的区别，取反符在方括号内部

字符组合

    /[a-z0-9A-Z]/   //表示包含a到z、A到Z、0到9的数字字母都可以返回true

    /[abc]/         // 只要包含a/b/c其中一个字母就会返回true
    /^[abc]$/       // 中有是a/b/c其中一个才会返回true
    /^[a-z]$/       // 26个小写字母任意一个都会返回true
    /^[a-zA-Z0-9a]$ // 26个字母(大小写都可以)和0到9的数字都可以返回true
    /^[^a-zA-Z0-9a]$ // 26个字母(大小写都可以)和0到9的数字都 不 可以可以true

量词符

符号	作用
*	重复零次或更多次
+	重复一次或更多次
?	重复零次或一次
{n}	重复n次
{n,}	重复n次或更多次
{n,m}	重复n到m次

    console.log(/^a+$/.test('a')); // 最少出现一次
    console.log(/^a{3}$/.test('aaa')); // 出现三次
    console.log(/^a{3,}$/.test('aaaa')); // 出现3次以上
    console.log(/^a{3,5}$/.test('aaaa')); // 出现3到5次都可以

括号总结

• 小括号表示优先级
• 中括号表示范围
• 大括号表示表示重复次数

预定义类

预定义类表示常见模式的简写

预定义类	作用
\d	匹配0-9的数字，相当于[0-9]
\D	匹配所有0-9的数字之外的字符，相当于[^0-9]
\w	匹配任意数字、字母和下划线，相当于[a-zA-Z0-9_]
\W	匹配除数字、字母和下划线之外的字符，相当于[^a-zA-Z0-9_]
\s	匹配空格、制表符、换行符等空格字符，相当于[\t\r\n\v\f]
\S	匹配非空格字符，相当于[^\t\r\n\v\f]

示例：

    /^\d{3,4}-\d{7,8}&/.test('010-12345678')

正则表达式中的替换

replace 替换

replace()方法可以实现替换字符操作，用来替换的参数可以是一个字符串或是一个正则表达式

    stringObject.replace(regexp/substr,replacement);
    // regexp/substr: 被替换的字符串或正则表达式
    // replacement: 替换为的字符串
    // 返回值为替换完的新字符串
    let str = 'blue和red';
    let newstr = str.replace('blue','yellow')
    let newstr = str.replace(/blue/,'yellow')

正则表达式switch参数

switch参数表示按什么模式匹配

• g:全局匹配
• i:忽略大小写匹配
• gi:全局匹配+忽略大小写匹配

示例：

    /[a-z]/[g]