JavaScript正则表达式及相关方法的使用

本文仅对JavaScript中如何使用正则及一些相关的方法进行简要介绍

常用元字符

这里仅展示常用元字符，全部元字符请点击MDN查看

元字符	说明
\d	匹配数字
\D	匹配任意非数字的字符
\w	匹配字母或数字或下划线
\W	匹配任意不是字母，数字，下划线
\s	匹配任意的空白符
\S	匹配任意不是空白符的字符
.	匹配除换行符以外的任意单个字符
^	表示匹配行首的文本(以谁开始)
$	表示匹配行尾的文本(以谁结束)

限定符

限定符	说明
*	修饰前面的字符可以重复零次或更多次
+	修饰前面的字符可以重复一次或更多次
?	修饰前面的字符可以重复零次或一次
{n}	修饰前面的字符可以重复 n 次
{n,}	修饰前面的字符可以重复 n 次或更多次
{n,m}	修饰前面的字符可以重复 n 到 m 次

其它

[]   字符串用中括号括起来，表示匹配其中的任一字符，相当于或的意思
[^]  匹配除中括号以内的内容
\    转义符
|    或者，选择两者中的一个。注意|将左右两边分为两部分，而不管左右两边有多长多乱
()   从两个直接量中选择一个，分组
eg：gr(a|e)y匹配gray和grey
[\u4e00-\u9fa5]  匹配汉字

JavaScript正则对象

正则对象 RegExp 是 JavaScript 的内置对象，就像Date和Math一样。 
参数都是字符串类型
第一个参数 正则表达式的匹配规则
第二个参数flag, 不写默认区分大小写， i: 忽略大小写; g: 全局匹配

创建js正则对象的两种方式

• 第一种：

 const regularExpression = new RegExp('ab[a-z]', 'i')

• 第二种：

// g 和 i，需要哪个写哪个，不乐意可以都不写
 const regularExpression = /ab[a-z]/gi

js正则的三种使用方式

js正则在对字符串就行操作时共有三种方式，分别是：匹配、提取和替换

• 匹配

  text 方法，是正则对象（RegExp）的方法，顾名思义，用正则去检测字符串是否符合指定的规则，如果字符串与指定的正则表达式相匹配 ，返回true；否则false。

  let regularExpression = new RegExp('ab[a-z]', 'i')
  let str = 'aBxyz'
  console.log(reg.test(str)) // true
  

  或者

  let regularExpression = /ab[a-z]/gi
  let str = 'aBxyz'
  console.log(regularExpression.test(str))  // true
  

• 提取
  假定有这样一个需求：
  需要将示例中的人员工资提取出来，“ 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 ”

  我们有应该四种方法：

  1、exec 方法，是正则对象（RegExp）的方法

    此方法能返回一个由匹配到的结果组成的数组， 如果没有匹配到结果，返回null。
  

  如果不指定全局匹配参数 ‘ g ’ ，那么此方法只返回第一个匹配到的结果。栗子：

  const str = ' 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 '
  const reg = /\d+/
  let content = reg.exec(str)
  console.log(content)  
  content = reg.exec(str)
  console.log(content) 
  // 此时两次打印的结果是一毛一样的，可以贴到控制台输出一下瞅瞅~
  // [ "5200", groups: undefined, index: 4, input: " 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 " ]
  

  如果加上了全局匹配参数 ’ g ’ ，辣么每调用一次，就依次返回下一个所匹配的结果，直到结果为null，完成全部匹配。栗子：

  const str = ' 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 '
  const reg = /\d+/gi  // i 是忽略大小写，不得意也可以不加
  let content = reg.exec(str)
  console.log(content)  // ["5200", index: 4, input: "...", groups: undefined]  --> 第一个匹配结果 5200 
  content = reg.exec(str)
  console.log(content) // ["3800", index: 15, input: "...", groups: undefined]  --> 第二个匹配结果 3800
  content = reg.exec(str)
  console.log(content) // ["6666", index: 28, input: "...", groups: undefined]  --> 第三个匹配结果 6666 
  content = reg.exec(str)
  console.log(content) // null  -->  后续没有匹配结果，输出null
  
  // 此时可以看到咱们三次打印的结果是三次匹配到的值，但这个样子写肯定是不妥的，我们可以用一个循环来拿到所有的结果。
  
  const resultArr = [] // 存放每次匹配到的结果
  let onceResult = '' // 每次的匹配结果
  do {
    onceResult = reg.exec(str)
    if (onceResult) {
      resultArr.push(onceResult[0])
    }
  } while (onceResult)
  console.log(resultArr) // ["2500", "3000", "8000"]  -->  这里包含了所有的匹配结果
  

  ---

  对于提取，我们还有第二种方法可以使用

  2、match 方法，有所不同的是match是字符串（String）的方法

    此方法能返回一个由匹配到的结果组成的数组， 如果没有匹配到结果，返回null。
  

  直接上代码吧！

  如果不指定全局匹配参数 ‘ g ’ ，那么此方法只返回第一个匹配到的结果。栗子：

  const str = ' 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 '
  const reg = /\d+/
  console.log(str.match(reg))
  console.log(str.match(reg))
  // 此时两次打印的结果与不加g的exec输出结果是一毛一样的，也可以贴到控制台输出一下瞅瞅~
  // [ "5200", groups: undefined, index: 4, input: " 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 " ]
  

  如果加上了全局匹配参数 ’ g ’ ，辣么就会返回一个由所有匹配的结果组成的数组。栗子：

  const str = ' 张三：5200元， 李四： 3800元， 王二麻子： 6666块钱 '
  const reg = /\d+/g
  console.log(str.match(reg)) // ["5200", "3800", "6666"]  -->  这里包含了所有的匹配结果
  

  ---

  这里再介绍一种分组提取的方法

  3、正则表达式中利用小括号就行分组，就可以通过 RegExp.$1、$2 … 获取分组中的值

  咱举个栗子

  // 提取日期中的每一部分  2020-12-20
  const dateStr = '2020-12-20'
  // 以小括号就行分组
  const reg = /(\d{4})-(\d{1,2})-(\d{1,2})/
  // reg.test(dateStr)
  // reg.exec(dateStr)
  dateStr.match(reg)
  // RegExp.$1 、 $2 .... 是正则对象的静态属性，
  // 只要调用任何一个可以执行正则表达式的的方法test、exec、match等，
  // $1$2...等等会自动赋值正则表达式分组中的值
  
  console.log(RegExp.$1) // 2020  -->  第一个分组（第一个括号）中的值
  console.log(RegExp.$2) //   12  -->  第二个分组（第二个括号）中的值
  console.log(RegExp.$3) //   20  -->  第三个分组（第三个括号）中的值
  

  ---

  4、split 方法，是字符串（String）的方法

  使用指定的分隔符字符串将一个字符串分割成数组，也可以结合正则使用，使用较为简单，看代码吧~
  

  // 提取日期中的每一部分  2020/12-12
  let dateStr = '2020/12-12'
  // 指定分隔符为'/'或者'-' 
  console.log(dateStr.split(/[/-]/)) // ["2020", "12", "12"]
       
  // 提取邮箱中的每一部分 
  let emailStr = 'yzxxxxxx@163.com'
  // 指定分隔符为'@'或者'.' , 由于'.'是正则的元字符，所以这里需要加斜杠'\'进行转义（其实写在 [] 中的东西也可以不用转义）
  console.log(emailStr.split(/[@\.]/)) //  ["yzxxxxxx", "163", "com"]
  

• 替换
  即，将字符串中与正则匹配的内容替换成其它内容

  replace 方法，是字符串（String）的方法

  方法返回一个替换后的新的字符串
  

  // 替换所有的空白
  const firstStr = '  123    asd        poi   mw     w   '
  // replace 默认只能替换掉第一个查找到的内容，所以需要添加全局匹配参数 'g'
  console.log(firstStr.replace(/\s/g, '')) // 123asdpoimww
  // 其它方法也可以实现功能，方法有很多，这里仅作正则用法的示例讲解
  console.log(firstStr.split(' ').join('')) // 123asdpoimww	
  // 栗子第二个
  const secondStr = 'add, 123, sdf， 对外发文， 是的, dw,12，请问'
  // 把中文 ，和英文 , 替换成点 '.'
  console.log(secondStr .replace(/[,，]/g, '.')) // add. 123. sdf. 对外发文. 是的. dw.12.请问
  // 把中文 ，和英文 , 替换成点 '|'
  console.log(secondStr.replace(/,|，/g, '|')) // add| 123| sdf| 对外发文| 是的| dw|12|请问
  

到这里就结束啦，本文也只是粗略解释，如有不对还请提出，本人也只是前端菜鸟，还是艰难前行~

详细学习还请参考MDN的 RegExp 和 String 文档