正则表达式：规定了字符串中字符出现规律的表达式

什么是正则表达式？ 答：是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象 正则表达式的组成？ 答：包括字符类、限定符、分组、向前查找和方向引用。

正则表达式的 pattern（模式）可以是任何简单或复杂的正则表达式，包括字符类、限定符、分组、向前查找或反向引用。每个正则表达式可以带零个或多个 flags（标记），用于控制正则表达式的行为。

下面给出了表示匹配模式的标记：

  • g：全局模式，表示查找字符串的全部内容，而不是找到第一个匹配的内容就结束
  • i ：不区分大小写，表示在查找匹配时忽略pattern和字符串的大小写
  • m：多行模式，表示查找到一行文本末尾时会继续查找
  • y：黏附模式，表示只查找从lastlndex开始及以后的字符串
  • u：Unicode模式，启用Unicode匹配
  • s：dotAll模式，表示元字符，匹配任何字符（包括\n或\r)

使用不同模式和标记可以创建出各种正则表达式

  1. // 匹配字符串中的所有"at"
  2. let pattern1 = /at/g;
  3. // 匹配第一个"bat"或"cat"，忽略大小写
  4. let pattern2 = /[bc]at/i;
  5. // 匹配所有以"at"结尾的三字符组合，忽略大小写
  6. let pattern3 = /.at/gi;

这里的 pattern1 匹配“bat”或 “cat”，不区分大小写。要直接匹配”[bc]at”，左右中括号都必须像 pattern2 中那样使用反斜杠转义。在 pattern3 中，点号表示”at”前面的任意字符都可以匹配。如果想匹配”.at”，那么要像 pattern4中那样对点号进行转义。

11.1 创建 RegExp 对象的语法

在 JavaScript 中，可以通过两种方式创建一个正则表达式。
方式一：通过调用RegExp对象的构造函数创建 

  1. // var 变量 = new RegExp("正则表达式","匹配模式")
  2. let search = new Regexp(/a/,"g"); // g 表示全局搜索，正则表达式作为实参。在此为全局搜索带a的字符串
  4. let search = new Regexp('a',"g"); // g 表示全局搜索，字符串作为实参
  5. search = /a/  // 以上两种的结果是一样的
  7. 注意：
  8. 1.使用RegExp的第一个参数放正则表达式，可以是字符串格式，也可以是正则表达式（/表达式/）

11.2 使用字面量创建正则表达式

  1. // let 变量 = /正则表达式/匹配模式
  2. let search = /a/g     //g 表示全局搜索
  1. let srt = 'hello word';
  2. let reg = /l/ig;    // i 忽略大小写，g 全局搜索
  3. console.log(srt.replace(reg,"*")); // "he**w word"
  4. // replace 替换   将检索到的“l”和“L”全部替换成“*”

小提示

干货：用字面量创建，后面的表达式不能写成变量，而使用RegExp 可以把变量当成实参传进去，更灵活

  1. //  获取元素
  2.         var inp = document.querySelector('input')
  3.         var p = document.querySelector('p')
  4.         // 页面一打开先获取下p的内容
  5.         var str = p.innerHTML;
  6.         inp.onkeydown = function(e){
  7.             if(e.keyCode==13){
  8.                 // 键盘按下获取inp的内容
  9.                 var word = this.value;
  10.                 // 实例化正则对象   RegExp（表达式，修饰符）
  11.                 var keyReg = new RegExp(word,'g');
  12.                 var newHtml= str.replace(keyReg,`<b style="color:blue">${word}</b>`);
  13.                 // 渲染p的内容
  14.                 p.innerHTML = newHtml;
  15.             }
  16.         }

正则替换 replace

replace() 方法可以实现替换字符串操作，用来替换的参数可以是一个字符串或是一个正则表达式。
字符串.replace(‘1’,’2’) 里面要有两个参数。也可以添加标签，返回值是一个新的字符串，需要一个新的变量去接。

  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/a,'哈哈')
  13. console.log(nStr) //哈哈bc哈哈bc
  14. //忽略大小写i
  15. var str = 'aAbcAba';
  16. var newStr = str.replace(/a/gi,'哈哈')//"哈哈哈哈bc哈哈b哈哈"

11.3 test()

检测正则表达式是否匹配字符串的一部分，返回布尔值（Boolean）
如果输入的文本与模式匹配，则参数返回 true，否则返回 false。这个方法适用于只想测试模式是否匹配，而不需要实际匹配内容的情况。

  1. rreg.test(str);
  3. var reg = /abc/; //创建正则表达式，白话理解相当于规则
  4. var str = 'adcbf' //创建字符串
  5. var str1 = 'abcd' //创建字符串
  7. 检查字符串是否满足正则表达式的规则
  8. console.log(reg.test(str)); // false 字符串中没有'abc'
  9. console.log(reg.test(str1));  // true

test()经常用在 if 语句中：

  1. let text = "000-00-0000";
  2. let oattern = /\d{3}-\d{2}-\d{4}/;
  3. if(pattern.test(text)) {
  4.   console.log("The pattern was matched");
  5. }
  • 在这个例子中，正则表达式用于测试特定的数值序列。
  • 如果输入的文本与模式匹配，则显示匹配成 功的消息。
  • 这个用法常用于验证用户输入，此时我们只在乎输入是否有效，不关心为什么无效。

无论正则表达式是怎么创建的，继承的方法 toLocaleString()和 toString()都返回正则表达式的字面量表示。比如：

  1. let pattern = new RegExp("\\[bc\\]at","gi");
  2. console.log(pattern.toString()); // /\[bc\]at/gi 
  3. console.log(pattern.toLocaleString()); // /\[bc\]at/gi

这里的模式是通过 RegExp 构造函数创建的，但 toLocaleString()和 toString()返回的都是其
字面量的形式。

注意 正则表达式的 valueOf()方法返回正则表达式本身。

11.4 exec() 方法

exec() 主要用于捕获组使用。这个方法只接收一个参数，即要应用模式的字符串。如果找到了匹配项，则返回包含第一个匹配信息的数组；如果没找到匹配项，则返回null。返回的数组虽然是 Array 的实例，包含两个额外的属性：index 和 input。index是字符串中匹配模式的起始位置，input 是要查找的字符串。这个数组的第一个元素是匹配整个模式的字符串，其他元素是与表达式中的捕获组匹配的字符串。如果模式中没有捕获组，则数组只包含一个元素。

  1. let text = "mom and dad and baby";
  2. let pattern = /mom(and dad (and baby)?)?/gi;
  3. let matches = pattern.exec(text);
  4. console.log(matches.index); // 0
  5. console.log(matches.input); // "mom and dad and baby" 
  6. console.log(matches[0]); // "mom and dad and baby" 返回数组内第一个匹配信息
  7. console.log(matches[1]); // " and dad and baby" 
  8. console.log(matches[2]); // " and baby

在上面的正则表达式里，通过两层（）来进行检索

  • 使用正则后调用 exec() 后找到了一个匹配项。
  • 因为整个字符串匹配模式，所以 matchs 数组的 index 属性就是 0。
  • 数组的第一个元素是匹配的真个字符串。
  • 第二个元素是匹配的第一个捕获组的字符串。
  • 第三个元素是匹配的第二个捕获组的字符串。