正規表示式真的很騷，可惜你不會寫！！！

顧家進發表於2018-09-11

display: block;
padding: 15px 15px 15px 1rem;
font-size: 0.9em;
margin: 1em 0px;
color: rgb(0, 0, 0);
border-left: 5px solid rgb(239, 112, 96);
background: rgb(239, 235, 233);
overflow: auto;
word-wrap: normal;
word-break: normal;
“>

color: inherit;
line-height: inherit;
margin: 0px;
padding: 0px;
padding-left: 32px;
list-style-type: decimal;
“>
  • color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “>元字元
  • color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “>重複限定符
  • color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “>分組
  • color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “>轉義
  • color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “>條件或
  • color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “>區間

    color: inherit;
    line-height: inherit;
    padding: 0px;
    margin: 1.7em 0px;
    “>但很神奇的是： line-height: inherit;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    color: rgb(197, 17, 98);
    “>無論你大學選擇哪一門計算機語言，都沒有關於正規表示式的課程給你修，在你學會正則之前，你只能看著那些正則大師們，寫了一串外星文似的字串，替代了你用一大篇幅的if else程式碼來做一些內容校驗。

    color: inherit;
    line-height: inherit;
    padding: 0px;
    margin: 1.7em 0px;
    “>下面，不理君嘗試用一種比較通俗點的方式講一下正則，讓你能在讀完之後，自己寫出一些簡單的正則，再不濟，能看到別人寫的正則，那也不錯了。

    line-height: inherit;
    margin: 0px;
    display: inline-block;
    font-weight: normal;
    background: rgb(239, 112, 96);
    color: rgb(255, 255, 255);
    padding: 3px 10px 1px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    margin-right: 3px;
    “>1.元字元 color: inherit;
    line-height: inherit;
    padding: 0px;
    margin: 1.7em 0px;
    “>萬物皆有源，正則也是如此，元字元是構造正規表示式的一種基本元素。
    我們先來記幾個常用的元字元：
    color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    “> line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    font-weight: bold;
    background-color: rgb(240, 240, 240);
    text-align: center;
    “>元字元 color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    border: 0px;
    “> line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: center;
    “>. color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    border-width: 1px 0px 0px;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-top-style: solid;
    border-top-color: rgb(204, 204, 204);
    background-color: rgb(248, 248, 248);
    “> line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: left;
    “>匹配字母或數字或下劃線或漢字 line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: center;
    “>\s color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    border-width: 1px 0px 0px;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-top-style: solid;
    border-top-color: rgb(204, 204, 204);
    background-color: rgb(248, 248, 248);
    “> line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: left;
    “>匹配數字 line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: center;
    “>\b color: inherit;
    line-height: inherit;
    margin: 0px;
    padding: 0px;
    border-width: 1px 0px 0px;
    border-right-style: initial;
    border-bottom-style: initial;
    border-left-style: initial;
    border-right-color: initial;
    border-bottom-color: initial;
    border-left-color: initial;
    border-image: initial;
    border-top-style: solid;
    border-top-color: rgb(204, 204, 204);
    background-color: rgb(248, 248, 248);
    “> line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: left;
    “>匹配字串的開始 line-height: inherit;
    margin: 0px;
    font-size: 1em;
    border: 1px solid rgb(204, 204, 204);
    padding: 0.5em 1em;
    text-align: center;
    “>$ color: inherit;
    line-height: inherit;
    padding: 0px;
    margin: 1.7em 0px;
    “>有了元字元之後，我們就可以利用這些元字元來寫一些簡單的正規表示式了，
    比如：
      color: inherit;
      line-height: inherit;
      margin: 0px;
      padding: 0px;
      margin-bottom: 0.5em;
      “> color: inherit;
      line-height: inherit;
      margin: 0px;
      padding: 0px;
      ">1\babc或者^abc
      複製程式碼
        color: inherit;
        line-height: inherit;
        margin: 0px;
        padding: 0px;
        margin-bottom: 0.5em;
        “> color: inherit;
        line-height: inherit;
        margin: 0px;
        padding: 0px;
        ">1^\d\d\d\d\d\d\d\d$
        複製程式碼
          color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          margin-bottom: 0.5em;
          “> color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          ">1^1\d\d\d\d\d\d\d\d\d\d$
          複製程式碼

          line-height: inherit;
          margin: 0px;
          display: inline-block;
          font-weight: normal;
          background: rgb(239, 112, 96);
          color: rgb(255, 255, 255);
          padding: 3px 10px 1px;
          border-top-right-radius: 3px;
          border-top-left-radius: 3px;
          margin-right: 3px;
          “>2. 重複限定符           color: inherit;
          line-height: inherit;
          padding: 0px;
          margin: 1.7em 0px;
          “>有了元字元就可以寫不少的正規表示式了，但細心的你們可能會發現：別人寫的正則簡潔明瞭，而不理君寫的正則一堆亂七八糟而且重複的元字元組成的。正則沒提供辦法處理這些重複的元字元嗎？

          color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          display: table;
          width: 100%;
          text-align: left;
          “> color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          border-width: 1px 0px 0px;
          border-right-style: initial;
          border-bottom-style: initial;
          border-left-style: initial;
          border-right-color: initial;
          border-bottom-color: initial;
          border-left-color: initial;
          border-image: initial;
          border-top-style: solid;
          border-top-color: rgb(204, 204, 204);
          background-color: white;
          “>           line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          font-weight: bold;
          background-color: rgb(240, 240, 240);
          text-align: left;
          “>說明 color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          border-width: 1px 0px 0px;
          border-right-style: initial;
          border-bottom-style: initial;
          border-left-style: initial;
          border-right-color: initial;
          border-bottom-color: initial;
          border-left-color: initial;
          border-image: initial;
          border-top-style: solid;
          border-top-color: rgb(204, 204, 204);
          background-color: white;
          “> line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          text-align: left;
          “>重複零次或更多次 line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          text-align: center;
          “>+ color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          border-width: 1px 0px 0px;
          border-right-style: initial;
          border-bottom-style: initial;
          border-left-style: initial;
          border-right-color: initial;
          border-bottom-color: initial;
          border-left-color: initial;
          border-image: initial;
          border-top-style: solid;
          border-top-color: rgb(204, 204, 204);
          background-color: white;
          “> line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          text-align: left;
          “>重複零次或一次 line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          text-align: center;
          “>{n
          } color: inherit;
          line-height: inherit;
          margin: 0px;
          padding: 0px;
          border-width: 1px 0px 0px;
          border-right-style: initial;
          border-bottom-style: initial;
          border-left-style: initial;
          border-right-color: initial;
          border-bottom-color: initial;
          border-left-color: initial;
          border-image: initial;
          border-top-style: solid;
          border-top-color: rgb(204, 204, 204);
          background-color: white;
          “> line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          text-align: left;
          “>重複n次或更多次 line-height: inherit;
          margin: 0px;
          font-size: 1em;
          border: 1px solid rgb(204, 204, 204);
          padding: 0.5em 1em;
          text-align: center;
          “>{n,m
          } color: inherit;
          line-height: inherit;
          padding: 0px;
          margin: 1.7em 0px;
          “>有了這些限定符之後，我們就可以對之前的正規表示式進行改造了，比如：
            color: inherit;
            line-height: inherit;
            margin: 0px;
            padding: 0px;
            margin-bottom: 0.5em;
            “> color: inherit;
            line-height: inherit;
            margin: 0px;
            padding: 0px;
            ">1^\d{8
            }$
            複製程式碼
              color: inherit;
              line-height: inherit;
              margin: 0px;
              padding: 0px;
              margin-bottom: 0.5em;
              “> color: inherit;
              line-height: inherit;
              margin: 0px;
              padding: 0px;
              ">1^1\d{10
              }$
              複製程式碼
                color: inherit;
                line-height: inherit;
                margin: 0px;
                padding: 0px;
                margin-bottom: 0.5em;
                “> color: inherit;
                line-height: inherit;
                margin: 0px;
                padding: 0px;
                ">1^\d{14,18
                }$
                複製程式碼
                  color: inherit;
                  line-height: inherit;
                  margin: 0px;
                  padding: 0px;
                  margin-bottom: 0.5em;
                  “> color: inherit;
                  line-height: inherit;
                  margin: 0px;
                  padding: 0px;
                  ">1^ab*$
                  複製程式碼

                  line-height: inherit;
                  margin: 0px;
                  display: inline-block;
                  font-weight: normal;
                  background: rgb(239, 112, 96);
                  color: rgb(255, 255, 255);
                  padding: 3px 10px 1px;
                  border-top-right-radius: 3px;
                  border-top-left-radius: 3px;
                  margin-right: 3px;
                  “>3. 分組                   color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 1.7em 0px;
                  “>從上面的例子（4）中看到，*限定符是作用在與他左邊最近的一個字元，那麼問題來了，如果我想要ab同時被*限定那怎麼辦呢？
                  color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 0px;
                  “>正規表示式中用小括號()來做分組，也就是括號中的內容作為一個整體。

                  color: inherit;
                  line-height: inherit;
                  margin: 0px;
                  padding: 0px;
                  ">1^(ab)*
                  複製程式碼

                  line-height: inherit;
                  margin: 0px;
                  display: inline-block;
                  font-weight: normal;
                  background: rgb(239, 112, 96);
                  color: rgb(255, 255, 255);
                  padding: 3px 10px 1px;
                  border-top-right-radius: 3px;
                  border-top-left-radius: 3px;
                  margin-right: 3px;
                  “>4. 轉義                   color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 1.7em 0px;
                  “>我們看到正規表示式用小括號來做分組，那麼問題來了：
                  color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 0px;
                  “>如果要匹配的字串中本身就包含小括號，那是不是衝突？應該怎麼辦？

                  color: inherit;
                  line-height: inherit;
                  margin: 0px;
                  padding: 0px;
                  ">1^(\(ab\))*
                  複製程式碼

                  line-height: inherit;
                  margin: 0px;
                  display: inline-block;
                  font-weight: normal;
                  background: rgb(239, 112, 96);
                  color: rgb(255, 255, 255);
                  padding: 3px 10px 1px;
                  border-top-right-radius: 3px;
                  border-top-left-radius: 3px;
                  margin-right: 3px;
                  “>5. 條件或                   color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 1.7em 0px;
                  “>回到我們剛才的手機號匹配，我們都知道：國內號碼都來自三大網，它們都有屬於自己的號段，比如聯通有130/131/132/155/156/185/186/145/176等號段，假如讓我們匹配一個聯通的號碼，那按照我們目前所學到的正則，應該無從下手的，因為這裡包含了一些並列的條件，也就是“或”，那麼在正則中是如何表示“或”的呢？
                  color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 0px;
                  “>正則用符號 | 來表示或，也叫做分支條件，當滿足正則裡的分支條件的任何一種條件時，都會當成是匹配成功。

                  color: inherit;
                  line-height: inherit;
                  margin: 0px;
                  padding: 0px;
                  ">1^(130|131|132|155|156|185|186|145|176)\d{8
                  }$
                  複製程式碼

                  line-height: inherit;
                  margin: 0px;
                  display: inline-block;
                  font-weight: normal;
                  background: rgb(239, 112, 96);
                  color: rgb(255, 255, 255);
                  padding: 3px 10px 1px;
                  border-top-right-radius: 3px;
                  border-top-left-radius: 3px;
                  margin-right: 3px;
                  “>6. 區間                   color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 1.7em 0px;
                  “>看到上面的例子，是不是看到有什麼規律？是不是還有一種想要簡化的衝動？
                  實際是有的
                  color: inherit;
                  line-height: inherit;
                  padding: 0px;
                  margin: 0px;
                  “>正則提供一個元字元中括號 [] 來表示區間條件。
                    color: inherit;
                    line-height: inherit;
                    margin: 0px;
                    padding: 0px;
                    margin-bottom: 0.5em;
                    “> color: inherit;
                    line-height: inherit;
                    margin: 0px;
                    padding: 0px;
                    margin-bottom: 0.5em;
                    “> color: inherit;
                    line-height: inherit;
                    margin: 0px;
                    padding: 0px;
                    margin-bottom: 0.5em;
                    “> color: inherit;
                    line-height: inherit;
                    padding: 0px;
                    margin: 1.7em 0px;
                    “>那上面的正則我們還改成這樣： 
                    1^((13[0-2])|(15[56])|(18[5-6])|145|176)\d{8
                      }$
                    複製程式碼

                    來源：https://juejin.im/post/5b96a8e2e51d450e6a2de115

                    1. 相關文章