只入门不深入理解的正则表达式讲解

huangminjian
542 阅读5分钟

前言

网上有许多关于正则的文章，但很多都是将正则的知识点统统都罗列出来后再进行讲解，对于新手而言，一下子去接受大量的正则知识会打消学习正则的兴趣，所以这篇文章会通过正则的写法、常见的正则 api 以及它的输出产物、基础的正则匹配规则这几方面的知识点，来帮助新手去入门正则。

正则的写法

首先我们要知道，正则它的编写形式，但我们需要使用到正则时，都会涉及到正则匹配规则以及字符串，所以正则写法有两种

  • 把正则匹配规则当作参数传入到字符串的 api 中
  • 把字符串当作参数传入到正则匹配规则的 api 中

常见的正则 api 以及它的输出产物

把正则匹配规则当作参数传入到字符串的 api 中

  • String.prototype.match()
    • match 方法接受一个参数，表示要字符串要匹配的规则，如果匹配成功，会返回一个数组，数组中包含了所有匹配上的字符串
    const testStr = 'There are two trees here. One is mine and the other is mine, too';
// [A-Z] 表示匹配任意一个大写的字母，需要用//包裹起来
// g 表示匹配到符合的字符串后不停止，直到匹配完全
const testRegExp = /[A-Z]/g;
console.log(testStr.match(testRegExp))//['T', 'O']
  • String.prototype.matchAll()
    • 不常用，可查看 mdn了解相关知识点
  • String.prototype.replace()
    • replace 接受两个参数，第一个参数表示要匹配的规则，第二个参数表示要替换的字符串，调用 replace 方法会返回一个新字符串，原字符串不会发生更改
    const testStr = 'There are two trees here. One is mine and the other is mine, too';
const testRegExp = /mine/g;//不加g的话仅会替换第一个mine
console.log(testStr.replace(testRegExp,'him'))//There are two trees here. One is him and the other is him, too
  • String.prototype.search()
    • search 方法接受一个参数，表示要字符串要匹配的规则，如果匹配成功，会返回在字符串中首次匹配项的索引;否则，返回 -1
    const testStr = 'There are two trees here. One is mine and the other is mine, too';
const testRegExp = /are/;
console.log(testStr.search(testRegExp))//6

把字符串当作参数传入到正则匹配规则的 api 中

  • RegExp.prototype.test()
    • test 方法接受一个字符串作为参数，用来查看正则表达式与指定的字符串是否匹配，返回 true 或 false
    const testStr = 'There are two trees here. One is mine and the other is mine, too';
const testRegExp = /trees/;
console.log(testRegExp.test(testStr))//true
  • RegExp.prototype.exec()
    • 不常用，可查看 mdn 了解相关知识点

基础的正则匹配规则

我们将会通过 match 方法去学习基础的正则匹配规则，

现在我们有字符串 testString = '123123412451256124567129123333'

  • 如果我想匹配出该字符串中所有的123，那么匹配规则直接写 （/123/） 即可 
    testString.match(/123/g)
//['123', '123', '123']
  • 如果我想匹配出该字符串中所有的123和124，可以用 ｜ 操作符将两个匹配规则结合起来 
    testString.match(/123|124/g)
['123', '123', '124', '124', '123']
  • 如果我想匹配出，该字符串中所有的123、124、125、126，那么写出（123｜124｜125｜126）就过于冗余，我们可以单独的对有变换的字符进行 ｜ 操作 
    testString.match(/12(3|4|5|6)/g)
['123', '123', '124', '125', '124', '123']
  • 但如果要匹配的数字过多，那么上面的写法也是过于冗余，所以我们可以用中括号写法，对有变换的字符进行一个区间取值 
    testString.match(/12[3-6]/g)
['123', '123', '124', '125', '124', '123']
  • 现在我们匹配到的是3-6结尾的字符串，但是如果我想匹配7，8，9，1，2结尾的字符串呢？正则提供了反选符号给我们完成这种功能 
    testString.match(/12[^3-6]/g)
['129']
  • 如果我想匹配，123，1233，12333，123333这种，只要以12开头的，后面可以接0或者无数个3，因为此时我们不能确定后面3的个数，所以我们需要正则提供的一些符号来帮助我们完成这个功能，* 符号表示前面的字符可以出现0或者无数次 
    testString.match(/12[3]*/g)
['123', '123', '12', '12', '12', '12', '123333']
  • 如果想匹配0或者1个3，那么要用符号 ？ 
    testString.match(/12[3]?/g)
['123', '123', '12', '12', '12', '12', '123']
  • 如果是至少有一个3，那么要用符号 + 
    testString.match(/12[3]+/g)
['123', '123', '123333']
  • 如果我现在就是要匹配12后面至少有2个3，至多有6个3，这种情况我们就需要使用另一种写法 
    //"{n,m}" 表示匹配前面子表达式至少 n 次，至多 m 次。
//所以 "*" 等价于 "{0,}"，"+" 等价于 "{1,}"，"?" 等价于 "{0,1}"。
testString.match(/12[3]{2,6}/g)
['123333']
  • 正则对一些常见的匹配规则，定义成了转义字符供我们使用，以下是几个常见的转义字符

    • "\D" 表示匹配非数字字符，等价于 "[^0-9]"。

    • "\n" 表示匹配换行符。

    • 更多的转义字符可以看 这里

总结

这篇文章仅仅是为了帮助没有接触过正则的朋友入门，讲的知识点都很浅显，想要深入的了解正则还需要去阅读更多的文章。

个人认为，对于正则，我们更应该注重于平时在业务中的积累，可以从表单中的手机号校验、身份证号码校验、电子邮箱校验等实际的应用场景开始积累。

参考资料

mdn

avatar
文章
阅读
粉丝