1 正则

  • 正则表达式（ Regular Expression ）是用于匹配字符串中字符组合的模式
  • 在 JavaScript中，正则表达式也 是对象。
  • 正则表通常被用来检索、替换那些符合某个模式（规则）的文本，例如验证表单，还常用于过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等

    2 正则表达式的创建

    ```javascript var regexp = new RegExp(/123/); console.log(regexp);

// 利用字面量创建 var rg = /123/;

  1. <a name="2aXGX"></a>
  2. # 3 检测字符串是否符合该规则--test()
  3. test() 正则对象方法，用于检测字符串是否符合该规则，该对象会返回 true 或 false
  4. ```javascript
  5. var rg = /123/;
  6. console.log(rg.test(123));//匹配字符中是否出现123  出现结果为true
  7. console.log(rg.test('abc'));//匹配字符中是否出现123 未出现结果为false
  8. console.log(regexp.test('hello 123 world')); // true

/123/ 只要包含有123这个字符串返回的都是true

4 正则表达式的组成

4.1 边界符 ^$

image.png

  1. var reg = /^abc/;
  2. console.log(reg.test('abc')); // true
  3. console.log(reg.test('abcd')); // true
  4. console.log(reg.test('aabcd')); // false
  6. var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
  7. console.log(reg1.test('abc')); // true
  8. console.log(reg1.test('abcd')); // false
  9. console.log(reg1.test('aabcd')); // false
  10. console.log(reg1.test('abcabc')); // false

4.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
  7. //取反 方括号内部加上 ^ 表示取反，只要包含方括号内的字符，都返回 false 。
  8. var reg2 = /^[^a-zA-Z0-9]$/;
  9. console.log(reg2.test('a'));//false
  10. console.log(reg2.test('B'));//false
  11. console.log(reg2.test(8));//false
  12. console.log(reg2.test('!'));//true

4.3 量词符

量词符用来设定某个模式出现的次数。
image.png

  1. var reg = /^[a-zA-Z0-9_-]{6,16}$/; // 这个模式用户只能输入英文字母 数字 下划线 中划线

4.4 括号分类

1.大括号 量词符. 里面表示重复次数
2.中括号 字符集合。匹配方括号中的任意字符.
3.小括号 分组

4.5 预定义类

预定义类指的是某些常见模式的简写方式.
image.png

5 正则替换replace

  1.  stringObject.replace(regexp/substr,replacement)
  1. 第一个参数: 被替换的字符串 或者 正则表达式
  2. 第二个参数: 替换为的字符串
  3. 返回值是一个替换完毕的新字符串 ```javascript var str = ‘andy和red’; var newStr = str.replace(‘andy’, ‘baby’); console.log(newStr)//baby和red

//等同于 此处的andy可以写在正则表达式内 var newStr2 = str.replace(/andy/, ‘baby’); console.log(newStr2)//baby和red

  1. <a name="zSSk4"></a>
  2. # 6 正则表达式参数
  3. ```javascript
  4.  /表达式/[switch]
  • g：全局匹配 
  • i：忽略大小写 
  • gi：全局匹配 + 忽略大小写

6.1 案例—过滤敏感词

  1. var text = document.querySelector('textarea');
  2. var btn = document.querySelector('button');
  3. var div = document.querySelector('div');
  4. btn.onclick = function() {
  5.   div.innerHTML = text.value.replace(/激情|gay/g, '**');
  6. }

｜ 表示 或

7 正则与字符串操作

7.1 检索字符串exec()

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

  1. var str = 'hello world'
  2. var pattern = /o/
  3. console.log(pattern.exec(str)) // ["o", index: 4, input: "hello world", groups: undefined]

7.2 提取多个内容

  1. var str = '<div>{{ name }}今年{{ age }}岁了</div>';
  2. // 定义正则
  3. var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
  5. while(true) {
  6.   var result = pattern.exec(str);
  7.   if (result === null) {
  8.     break
  9.   }
  10.   str = str.replace(result[0], result[1]);
  11. }
  12. console.log(str);  // <div>name今年age岁了</div>

若是把str = str.replace(result[0], result[1]); 注释掉会出现死循环
因为一直可以匹配到，无结束条件
简化版：

  1. var data = { name: '张三', age: 20 }
  2. var str = '<div>{{ name }}今年{{ age }}岁了</div>';
  3. // 定义正则
  4. var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
  6. while(result = pattern.exec(str)) {
  7.   str = str.replace(result[0], data[result[1]]);
  8. }
  9. console.log(str); // <div>张三今年20岁了</div>

result: [“{{ name }}”, “name”, index: 5, input: “

{{ name }}今年{{ age }}岁了
“, groups: undefined]

7.3 封装简易的模版引擎

  1. // 封装
  2. function template(id, data) {
  3.   var str = document.querySelector('#' + id).innerHTML;
  4.   var pattern = /{{\s*([a-zA-Z]+)\s*}}/;
  5.   var result = null;
  6.   while ( result = pattern.exec(str)) {
  7.     str = str.replace(result[0], data[result[1]]);
  8.   }
  9.   return str;
  10. }
  11. </script>

7.4 抽取正则匹配字符串match

  1. var str = 'hello world'
  2. console.log(str.match(/o/g));  // ["o", "o"]
  3. console.log(str.match(/(o)/));  // ["o", "o", index: 4, input: "hello world", groups: undefined]

8 小括号作用

小括号的作用：小括号提供了分组，更加方便提取

  1. var str = 'hello world'
  2. var pattern1 = /o/
  3. var pattern2 = /(o)/
  4. console.log(pattern1.exec(str)) // ["o", index: 4, input: "hello world", groups: undefined]
  5. console.log(pattern2.exec(str)) // ["o", "o", index: 4, input: "hello world", groups: undefined]

抽取日期：

  1. var regex = /(\d{4})-(\d{2})-(\d{2})/;
  2. var string = "2021-06-12";
  3. console.log(regex.exec(string)); // ["2021-06-12", "2021", "06", "12", index: 0, input: "2021-06-12", groups: undefined]

image.png