正则表达式

190 阅读2分钟

参考手册

编写正则表达式核心:明确你要匹配的东西,然后~。没错就是这么简单。

补充

<script>
    // 反斜杠 :转移字符,将转移符号后面的内容识别成文本
    var str1 = "ab\\cd";
    console.log(str1);  // ab\cd

    var str2 = "ab\"cd"
    console.log(str2) // ab"cd

    var str2 = "ab\*cd"
    console.log(str2) // ab*cd

    // 反斜杠配合特殊的字母,有特殊的含义
    var str3 = "ab\ncd";  // \n 表示换行
    console.log(str3);

    var str3 = "ab\tcd";  // \t 缩进
    console.log(str3);
    
    // 多行文本
    // 使用转移字符,将文本形式的回车给转义掉
    var docBody = document.getElementsByTagName('body')[0]
    docBody.innerHTML = "\
    <div></div>\
    <span></span>\
    "

    // 或者使用 ES6 模板字符串 ``
  </script>

image.png

image.png

正则表达式

  • 作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择
  1. 正则表达式创建 RegExp
<script>
    // 第一种创建方法:字面量
    var reg = /pattern/
    var reg = /pattern/igms(修饰符)
    
    // 第二种创建方法:构造函数
    var reg = new RegExp('pattern')
</script>
  1. 正则表达式-修饰符

image.png

  • str.match(reg) 没有使用修饰符 g , 只会匹配一个, 匹配到返回类数组 , 匹配不到返回 null , 如果添加了修饰符 g 进行全局匹配 , 就会将匹配到的内容已数组的形式返回
<script>
    var reg = /ab/;
    var str = "abcabcabcab";
    console.log("不加 g , 匹配到", str.match(reg));

    var reg1 = /ab/g;
    console.log("加 g , 匹配到", str.match(reg1));

    var reg2 = /d/;
    console.log("不加 g , 匹配不到", str.match(reg2));

    var reg3 = /d/g;
    console.log("加 g , 匹配不到", str.match(reg3));
</script>

image.png

  • 修饰符 m ,多行匹配,相当于另起一行
<script>
// 修饰符 m 多行匹配,字符串多行使用换行转义符 \n
    var reg = /a/g;
    var str = "abcdea";
    console.log(str.match(reg)); // ["a", "a"]

    var reg1 = /a/g;
    var str1 = "abcde\na";
    console.log(str1.match(reg1)); // g 全局匹配,["a", "a"]

    var reg2 = /^a/g;
    var str2 = "abcde\na";
    console.log(str2.match(reg2)); // ^开头, g 全局匹配,["a"]

    var reg3 = /^a/gm;
    var str3 = "abcde\na";
    console.log(str3.match(reg3)); // ^开头, g 全局匹配,m 多行匹配 ["a", "a"]
</script>
  1. 表达式
  • [] 字符集合,表示匹配一个字符
  • [^] 尖角在字符集里面表示 对字符集里的东西取反
  • [] 字符集合里空格,会匹配空格
<script>
    // [] 字符集合
    var reg1 = /[a-z]/g; // 表示匹配小a到小z
    var reg = /[a|b]/g; // 表示匹配 a、| 、b 中的任意一个
    var str = "|cda";
    console.log(reg.test(str)); //true
    console.log(str.match(reg)) // ["|", "a"]
</script>
  • | 或
<script>
    var reg = /a|b/g; // 表示匹配 a 或者 b
</script>
  1. 元字符
  • \w 单词字符:[0-9a-zA-Z_] 匹配0-9,a-z,A-Z,_ 下划线

  • \W 非单词字符

  • \d 0-9

  • \D 非数字

  • \s 空白字符 \s === [\t\n\r\v\f]

  • \S 非空白字符

  • \b 单词边界

  • \B 非单词边界

  • . 点: . === 除换行符\n之外的所有字符

  1. unicode 编码
  • \u0000

  • \u 格式

  • 0000 四个十六进制

  • 第一层:\u010000 -\u01ffff,第一层01可以省略,其他不可以

  • 第二层:\u020000 -\u02ffff

  • 第十六层:\u100000-\u10ffff

  • unicode编码

<script>
    // [] 字符集合
    var reg = /[\u524d\u7aef\u5f00\u53d1]/g; // 前端开发
    var str = "前端开发";
    console.log(reg.test(str));
    console.log(str.match(reg))
</script>

image.png

  1. 量词

image.png

image.png

image.png

  1. 其他

image.png

image.png

image.png

image.png

image.png

image.png

reg.exec()

  1. 加 g 进行全局匹配
  • reg.exec() 匹配到返回类数组,匹配不到返回null
  • str.match() 匹配到返回数组
  1. 不加 g
  • reg.exec() 匹配到返回类数组,匹配不到返回null
  • str.match() 匹配到返回类数组,匹配不到返回null
<script>
    // reg.exec()  lastIndex  ()括号:子表达式  g:全局匹配
    var reg = /abc/g;
    var str = "abcabcabc";
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(reg.exec(str));
    console.log(str.match(reg))
</script>

image.png

  1. 邮标 lastIndex,只有设置了g全局匹配,才可以使用reg.lastIndex,游标位置也可以手动设置。
  • 如果不加g,进行reg.lastIndex设置不好使,它还是会从0的位置进行匹配

image.png

子表达式 (),反向引用,子表达式的内容也会单独拿出来匹配

<script>
    // \1表示,反向引用第一个子表达式的内容
    // \2表示,反向引用第二个子表达式的内容
    var reg = /(\w)\1\1\1/; // 四个一个样的内容
    var reg1 = /(\w)\1(\w)\2/; // 形如aabb的内容
    var str = "aaaa";
    console.log(reg.test(str)) // true
</script>

image.png image.png

  1. str.match(reg) 与 子表达式
    • 当加 g 进行全局匹配之后,匹配得到返回数组形式,但子表达的内容会被忽略的。

image.png

image.png

str.replace()

  1. 基本使用
<script>
    // String.prototype.replace()
    // 非正则表达式没有访问全局的能力
    var str = "aa";
    console.log(str.replace('a', 'b')); // ba

    var reg = /a/g;
    console.log(str.replace(reg, 'b')) // bb
</script>

<script>
    // String.prototype.replace()
    // 将 aabb 的形式变为 bbaa
    var str = "aabb";
    var reg = /(\w)\1(\w)\2/g;
    console.log(str.replace(reg, "$2$2$1$1")) // bbaa

    // replace()方法,第二个参数为执行函数
    // 第一个参数:匹配到的结果,这里 aabb
    // 后面的参数为子表达式的反向引用,有几个子表达式就有几个参数
    // 在函数里面:以变量的形式使用反向引用的值
    console.log(str.replace(reg, ($, $1, $2) => {
      return $2 + $2 + $1 + $1;
    })) // bbaa
</script>

<script>
    // String.prototype.replace()
    // 将 the-first-name 变为 小驼峰的形式 theFirstName
    var str = "the-first-name";
    var reg = /-(\w)/g;
    var newStr = str.replace(reg, ($, $1) => {
      return $1.toLocaleUpperCase()
    })
    console.log(newStr); // theFirstName
</script>

<script>
    // String.prototype.replace()
    // 字符串去重 aaaabbbbcddd
    var str = "aaaabbbbcddd";
    var reg = /(\w)\1*/g;
    var newStr = str.replace(reg, "$1")
    console.log(newStr); // abcd
</script>
  1. 练习
<script>
    // String.prototype.replace()
    // 将一串数字科学计数,每隔三位打点,不能在开头
    // 明确需要匹配的东西:往后数每隔三位的空,且是非单词边界
    var str = "100000000000000";
    var reg = /\B(?=(\d{3})+$)/g;
    var newStr = str.replace(reg, ".")
    console.log(newStr); // 100.000.000.000.000
</script>

image.png

正向预查 (?=n)