JavaScript中的正则表达式

2023-03-08 下午前端 38 次浏览暂无评论

前言

正则表达式是前端开发过程中不可或缺的一部分,当我们处理各种表单时,都会遇到数据格式校验的问题。

相较于通过各种判断实现的校验,正则表达式的校验更加优雅也更加灵活。

这篇文章就来介绍一下JavaScript中正则表达式的那些事儿~

一、创建正则表达式

1、字面量创建

let reg = /-(\w)/g; // 匹配所有的 -[a-z]

2、构造函数创建

let reg = new RegExp("\-(\\w)", "g");
let reg = new RegExp(/-(\w)/, "g");

转义字符:\

特殊符号在字符串中使用时需要在前面加转义字符。另外转义字符还可以用来进行字符串的换行。

二、常用方法

正则表达式常用方法:

  • reg.test(str):判断字符串是否匹配正则表达式,返回布尔值。
  • reg.exec(str):找到第一个匹配的值,返回其位置。

字符串正则相关常用方法:

  • str.match(reg):返回一个符合正则条件的数组。

三、修饰符

  • i:忽略大小写
let reg = /abc/i;
let str = 'aBC';
console.log(reg.test(str)) //true
  • g:全局匹配
let reg = /abc/g;
let str = 'abcdddabc';
console.log(reg.test(str)) //true
console.log(str.match(reg)) //[ 'abc', 'abc' ]
  • m:多行匹配
let reg1 = /abc$/m;
let reg2 = /abc$/;
let str = 'aabc\nbbb';
console.log(reg1.test(str)) //true
console.log(reg2.test(str)) //false

注意:可以多个修饰符同时使用,比如 let reg = /abc/ig

四、表达式

一个表达式代表一位字符。

  • [abc]:表示查找中括号之间的任何字符。例如:[0-9]、[A-z]、[0-9A-z]
  • [^abc]:表示查找任何不在中括号之间的字符。这里^ 代表非的意思。
  • (abc|cba):这里| 代表或的意思。()和数学中的作用类似,会优先计算。

五、元字符

和表达式是一个东西,通过一些特定的字符来表示一些常用的表达式。

  • .:非换行的任何字符。

  • \s:space,任何为空的字符。

  • \d[0-9],digit,任何数字。

  • \w[0-9A-z_] ,word,数字字母_。

  • \b:border,单词边界。

  • [\w\W]:类似这种代表所有字符。

  • \1:代表反向引用第一个小括号包裹的表达式中的值。

    • let reg = /(\w)\1(\w)\2/g
      let str = "aabb123aabb"
      console.log(str.match(reg)) // [ 'aabb', 'aabb' ]
      
  • \u0000:查找Unicode字符集。比如[\u4e00-\u9fa5]是中文字符集。

元字符用小写字母来代表一类字符,对应的大写字母代表与之相反的字符。

比如:\d 代表数字,\D 代表非数字。

六、量词

  • n+:包含至少一个n的字符串

  • n*:包含零个或多个n的字符串

  • n?:包含零个或一个n的字符串

  • n{X}:包含X个n的字符串

  • n{X,Y}:包含X至Y个n的字符串,贪婪匹配原则

  • n{X,}:包含至少X个n的字符串,惰性匹配原则

  • ^n:以 n 开头的字符串

  • n$:以 n 结尾的字符串

  • ?=n:正向查找,匹配后一个字符串为n的字符

    • let reg = /\w(?=&)/g
      let str = "1&321&1"
      console.log(str.match(reg)) // [ '1', '1' ]
      
  • ?!n:正向查找,匹配后一个字符串不为n的字符。

  • ?<=n:反向查找,匹配前一个字符串为n的字符。

    • let reg = /(?<=&)\w/g
      let str = "1&321&1"
      console.log(str.match(reg)) // [ '3', '1' ]
      
  • ?!=n:反向查找,匹配前一个字符串不为n的字符。

正则表达式默认是贪婪匹配原则,能多则多。

量词后面加 ?变为惰性匹配原则,能少则少。使用两个?,能取0不取1。

let reg1 = /n+/g
let reg2 = /n+?/g
let str = "nnnn"
console.log(str.match(reg1)) // [ 'nnnn' ]
console.log(str.match(reg2)) // [ 'n', 'n', 'n', 'n' ]

七、常用的正则表达式汇总

结尾

以上就是我对JavaScript中的正则表达式的一些知识总结,更多内容请看 MDN


目录

一、创建正则表达式
二、常用方法
三、修饰符
四、表达式
五、元字符
六、量词
七、常用的正则表达式汇总
结尾
ICP备案号:鲁ICP备2020040322号