js:正则表达式

1.什么是正则表达式

正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript 中，正则表达式也是对象。这些模式被用于 RegExp 的 exec 和 test 方法，以及 String 的 match、matchAll、replace、search 和 split 方法。

2.正则表达式的特点

• 灵活性、逻辑性和功能性非常的强。
• 可以迅速地用极简单的方式达到字符串的复杂控制。

3.创建正则表达式

方式一：通过调用RegExp对象的构造函数创建

方式二：利用字面量创建 正则表达式

var rg = /123/;

4.测试正则表达式

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

5.正则表达式中的特殊字符

5.1正则表达式修饰符

5.2正则表达式模式

1.  
   var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
2.  
   console.log(rg.test('andy'));//true
3.  
   console.log(rg.test('baby'));//true
4.  
   console.log(rg.test('color'));//true
5.  
   console.log(rg.test('red'));//false
6.  
   var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
7.  
   console.log(rg1.test('aa'));//false
8.  
   console.log(rg1.test('a'));//true
9.  
   console.log(rg1.test('b'));//true
10.  
    console.log(rg1.test('c'));//true
11.  
    console.log(rg1.test('abc'));//false
12.  
    ----------------------------------------------------------------------------------
13.  
    // - 短横线 表示一个范围
14.  
    var reg = /^[a-z]$/ //26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
15.  
    console.log(reg.test('a'));//true
16.  
    console.log(reg.test('z'));//true
17.  
    console.log(reg.test('A'));//false
18.  
    -----------------------------------------------------------------------------------
19.  
    // 字符组合
20.  
    var reg1 = /^[a-zA-Z0-9]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
21.  
    ------------------------------------------------------------------------------------
22.  
    //取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
23.  
    var reg2 = /^[^a-zA-Z0-9]$/;
24.  
    console.log(reg2.test('a'));//false
25.  
    console.log(reg2.test('B'));//false
26.  
    console.log(reg2.test(8));//false
27.  
    console.log(reg2.test('!'));//true

5.3元字符

元字符是具有特殊含义的字符：

1.  
   var rg1 = /\d/;
2.  
   console.log(rg1.test('123456')); //true
3.  
   console.log(rg1.test('abc')); //false
4.  
   console.log(rg1.test('123456abc')); //true
5.  
    
6.  
   var rg2 = /\D/;
7.  
   console.log(rg2.test('123456')); //false
8.  
   console.log(rg2.test('abc')); //true
9.  
   console.log(rg2.test('123456abc')); //true
10.  
     
11.  
    var rg3 = /\w/;
12.  
    console.log(rg3.test('123456')); //true
13.  
    console.log(rg3.test('abc')); //true
14.  
    console.log(rg3.test('123456abc')); //true
15.  
    console.log(rg3.test('123456abc_')); //true
16.  
    console.log(rg3.test('*')); //false
17.  
     
18.  
    var rg4 = /\W/;
19.  
    console.log(rg4.test('123456')); //true
20.  
    console.log(rg4.test('abc')); //true
21.  
    console.log(rg4.test('123456abc')); //true

5.4量词

 括号总结

• 大括号 量词符. 里面表示重复次数
• 中括号 字符集合。匹配方括号中的任意字符.
• 小括号表示优先级

主要记住

1.  
   // 量词符：用来设定某个模式出现的次数
2.  
   //简单理解：就是让下面的a这个字符重复多少次
3.  
    
4.  
   var reg = /^a$/;
5.  
    
6.  
   * ：相当于 >=0 可以出现0次或者很多次
7.  
   var reg = /^a*$/;
8.  
   console.log(reg.test(''));
9.  
   console.log(reg.test('a'));
10.  
    console.log(reg.test('aaaa'));
11.  
     
12.  
    ：相当于 >=1 可以出现1次或者很多次
13.  
    var reg = /^a $/;
14.  
    console.log(reg.test(''));
15.  
    console.log(reg.test('a'));
16.  
    console.log(reg.test('aaaa'));
17.  
     
18.  
    ? ：相当于 1 || 0 重复1次或者0次
19.  
    var reg = /^a?$/;
20.  
    console.log(reg.test(''));
21.  
    console.log(reg.test('a'));
22.  
    console.log(reg.test('aaaa'));
23.  
     
24.  
    {3} ：就是重复3次
25.  
    var reg = /^a{3}$/;
26.  
    console.log(reg.test(''));
27.  
    console.log(reg.test('a'));
28.  
    console.log(reg.test('aaaa'));
29.  
    console.log(reg.test('aaa'));
30.  
     
31.  
    {3,}: 大于等于3 >=3
32.  
    var reg = /^a{3,}$/;
33.  
    console.log(reg.test(''));
34.  
    console.log(reg.test('a'));
35.  
    console.log(reg.test('aaaa'));
36.  
    console.log(reg.test('aaa'));
37.  
     
38.  
    {3,16}: 等于等于3 并且 小于等于16
39.  
    var reg = /^a{3,16}$/;
40.  
    console.log(reg.test(''));
41.  
    console.log(reg.test('a'));
42.  
    console.log(reg.test('aaaa'));
43.  
    console.log(reg.test('aaa'));

5.5边界符

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

如果 ^和 $ 在一起，表示必须是精确匹配。

 使用正则修复边界

1.  
   // 使用 正则表达式边界修复错误字符串
2.  
   buggyMultiline = `tey, ihe light-greon apple
3.  
   tangs on ihe greon traa`;
4.  
    
5.  
   // 1) 使用 ^ 修正字符串开始处和换行后的匹配。
6.  
   buggyMultiline = buggyMultiline.replace(/^t/gim,'h');
7.  
   console.log(1, buggyMultiline); // 修复 'tey'=>'hey'(字符串开始) , 'tangs'=>'hangs'(换行后)
8.  
    
9.  
   // 2) 使用 $ 修正字符串结尾处的匹配。
10.  
    buggyMultiline = buggyMultiline.replace(/aa$/gim,'ee.');
11.  
    console.log(2, buggyMultiline); // 修复 'traa' => 'tree'.
12.  
     
13.  
    // 3) 使用 \b 修正单词和空格边界上的字符。
14.  
    buggyMultiline = buggyMultiline.replace(/\bi/gim,'t');
15.  
    console.log(3, buggyMultiline); // 修复 'ihe' => 'the' 不影响 'light'.
16.  
     
17.  
    // 4) 使用 \B 匹配实体边界内的字符。
18.  
    fixedMultiline = buggyMultiline.replace(/\Bo/gim,'e');
19.  
    console.log(4, fixedMultiline); // 修复 'greon' 不影响'on'.

6.正则表达式前瞻后顾 负前瞻和负后顾

6.1前瞻（先行断言）

 首先使用括号（）来提升优先级，然后使用？= ，对后面紧跟 "e" 的 "h"进行全局搜索：

1.  
   var str= 'hello hi world';
2.  
   // 前瞻 查找 e 前面的h
3.  
   var pe = /h(?=e)/g;
4.  
   var newStr = str.replace(pe,'T');
5.  
   console.log(newStr);

6.2后顾 （后行断言）

  首先使用括号（）来提升优先级，然后使用？<= ，对前面紧跟 "l" 的 "d"进行全局搜索：

1.  
   // 后顾 查找l后面的 d
2.  
   var pe = /(?<=l)d/g;
3.  
   var newStr = str.replace(pe,'M');
4.  
   console.log(newStr);

 负前瞻（先行否定断言）

 首先使用括号（）来提升优先级，然后使用？! ，对后面不是紧跟 "e" 的 "h"进行全局搜索：

1.  
   // 负前瞻 查找h后面不是e的
2.  
   var pe = /h(?!e)/g;
3.  
   var newStr = str.replace(pe,'N');
4.  
   console.log(newStr);

负后顾（后行否定断言） 

 首先使用括号（）来提升优先级，然后使用？<! ，对前面不是紧跟 "e" 的 "l"进行全局搜索：

1.  
   // 负后顾 查找l前面不是e的
2.  
   var pe = /(?<!e)l/g;
3.  
   var newStr = str.replace(pe,'Q');
4.  
   console.log(newStr);

7.RegExp 对象属性

8.RegExp 对象方法

9.支持正则表达式的 String 对象的方法

10.案例

10.1验证座机号码**

1.  
   var reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/;
2.  
   var reg = /^\d{3,4}-\d{7,8}$/;
3.  
   console.log(reg.test('010-12345678'));// true

10.2表单验证案例

1.  
   //手机号验证:/^1[3|4|5|7|8][0-9]{9}$/;
2.  
   //验证通过与不通过更换元素的类名与元素中的内容
3.  
   if (reg.test(this.value)) {
4.  
   // console.log('正确的');
5.  
   this.nextElementSibling.className = 'success';
6.  
   this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
7.  
   } else {
8.  
   // console.log('不正确');
9.  
   this.nextElementSibling.className = 'error';
10.  
    this.nextElementSibling.innerHTML = '<i class="error_icon"></i>格式不正确,请从新输入 ';
11.  
    }

10.3注册页面

1.  
   //QQ号验证: /^[1-9]\d{4,}$/;
2.  
   //昵称验证:/^[\u4e00-\u9fa5]{2,8}$/
3.  
   //验证通过与不通过更换元素的类名与元素中的内容 ,将上一步的匹配代码进行封装,多次调用即可
4.  
   function regexp(ele, reg) {
5.  
   ele.onblur = function() {
6.  
   if (reg.test(this.value)) {
7.  
   // console.log('正确的');
8.  
   this.nextElementSibling.className = 'success';
9.  
   this.nextElementSibling.innerHTML = '<i class="success_icon"></i> 恭喜您输入正确';
10.  
    } else {
11.  
    // console.log('不正确');
12.  
    this.nextElementSibling.className = 'error';
13.  
    this.nextElementSibling.innerHTML = '<i class="error_icon"></i> 格式不正确,请从新输入 ';
14.  
    }
15.  
    }
16.  
    };

10.4正则替换replace

1.  
   var str = 'andy和red';
2.  
   var newStr = str.replace('andy', 'baby');
3.  
   console.log(newStr)//baby和red
4.  
   //等同于 此处的andy可以写在正则表达式内
5.  
   var newStr2 = str.replace(/andy/, 'baby');
6.  
   console.log(newStr2)//baby和red
7.  
   //全部替换
8.  
   var str = 'abcabc'
9.  
   var nStr = str.replace(/a/,'哈哈')
10.  
    console.log(nStr) //哈哈bcabc
11.  
    //全部替换g
12.  
    var nStr = str.replace(/a/g,'哈哈')
13.  
    console.log(nStr) //哈哈bc哈哈bc
14.  
    //忽略大小写i
15.  
    var str = 'aAbcAba';
16.  
    var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"

10.5正则替换敏感词

1.  
   <textarea name="" id="message"></textarea> <button>提交</button>
2.  
   <div></div>
3.  
   <script>
4.  
   var text = document.querySelector('textarea');
5.  
   var btn = document.querySelector('button');
6.  
   var div = document.querySelector('div');
7.  
   btn.onclick = function() {
8.  
   div.innerHTML = text.value.replace(/激情|gay/g, '**');
9.  
   }
10.  
    </script>

11.详细介绍正则的特殊字符大全（来源于MDN）

下面的页面与表格列出了一个正则表达式中可以利用的特殊字符的完整列表和描述。

断言（Assertions）

表示一个匹配在某些条件下发生。断言包含先行断言、后行断言和条件表达式。

字符类（Character Classes）

区分不同类型的字符，例如区分字母和数字。

组和范围（Groups and Ranges）

表示表达式字符的分组和范围。

量词（Quantifiers）

表示匹配的字符或表达式的数量。

Unicode 属性转义（Unicode Property Escapes）

基于 unicode 字符属性区分字符。例如大写和小写字母、数学符号和标点。

这篇好文章是转载于：学新通技术网