經過實例學習正則表達式

時間 2019-11-06

原文原文鏈接

判斷郵箱是否正確

郵箱正則

/\w+[\w\.]*@[\w\.]+\.\w+/

測試用例

const regex = /\w+[\w\.]*@[\w\.]+\.\w+/

regex.test('666@email.com')            // true
regex.test('july@e.c')                 // true               
regex.test('_@email.com.cn')           // true
regex.test('july_1234@email.com')      // true

regex.test('@email.com')               // false
regex.test('julyemail.com')            // false
regex.test('july.email.com')           // false
regex.test('july@')                    // false
regex.test('july@email')               // false
regex.test('july@email.')              // false
regex.test('july@.')                   // false
regex.test('july@.com')                // false
regex.test('-~!#$%@email.com')         // false

正則講解

\w。 \w屬於一種預約義模式，表示匹配任意的字母、數字和下劃線。點擊查看其餘預約義模式。
+、*。 +、*和？在正則表達式中被稱爲量詞符。+表示一次或屢次，*表示0次或屢次，？表示0次或一次。
\. 。 . 在正則表達式中被稱爲元字符，它能夠匹配除回車（\r）、換行(\n) 、行分隔符（\u2028）和段分隔符（\u2029）之外的全部字符。由於元字符有特殊含義，因此若是要匹配元字符自己，就須要使用轉義字符，也就是在前面加上反斜槓 ( \ )。點擊查看其餘元字符
[\w\.]。 [ ] 表示一個字符集合，好比 [ july ] 不是表示匹配整個單詞，而是表示j、u、l和y組成的一個字符集合，匹配時只要匹配到其中一個字母就表示匹配成功。點擊查看字符集合詳解
總覽

匹配URL地址

URL正則

/https?:\/\/(\w*:\w*@)?[-\w\.]+(:\d+)?(\/([\w\/\.]*(\?\S+)?)?)?/

測試用例

const regex = /https?:\/\/(\w*:\w*@)?[-\w\.]+(:\d+)?(\/([\w\/\.]*(\?\S+)?)?)?/

regex.test('http://www.forta.com/blog')                    // true
regex.test('https://www.forta.com:80/blog/index.cfm')      // true
regex.test('https://www.forta.com')                        // true
regex.test('http://ben:password@www.forta.com/')           // true
regex.test('http://localhost/index.php?ab=1&c=2')          // true
regex.test('http://localhost:8500/')                       // true

正則講解

( ) 。相似於( \w:\w*@ )這樣的表達式被稱爲子表達式，相比於字符集合[ ]匹配時只匹配集合中的一個字符，子表達式是將括號內的表達式做爲一個總體來匹配。好比 ( :\d+ )匹配相似於「:8080」這樣的字符串，而 [ :\d ] 匹配一個 : 或者一個數字。
總覽

練習

去掉html文件中的全部註釋

html文件

我在本地隨便寫了一個html文件，包含css、html和js3個部分，是一個完整的網頁。javascript

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 
      這是css的多行註釋
      這是css的多行註釋 這是css的多行註釋
    */
    * {
      margin: 0;
      padding: 0;
      /* 這是css的多行註釋 */
    }

    html {
      color: #000;
    }
  </style>
</head>

<body>
  <h1>h1 title</h1> <!-- 這是html註釋 -->

  <h2>h2 title</h2>
  <!--  這是html註釋 -->
  <button style="/* 這是行內css的註釋 */color: red/* 這是行內css的註釋 */">click me</button>
  <button onclick="/* 這是行內js的註釋 */alert('july')/* 這是行內js的註釋 */">click me 2</button>
  <!--  
    這是html註釋 
  -->
  <button onclick="// 這是行內js的註釋
    alert(/* 註釋 */'july')
    //這是行內js的註釋 'sdfs' " style='color: blue'>click me 3</button>
  <!--  這是html註釋 -->

  <script>
    // 這是js單行註釋
    // 這是js單行註釋 這是js單行註釋 
    function func() {
      console.log('test');  // 這是js單行註釋
    }

    /*
     * 這是js多行註釋
     * 這是js多行註釋 這是js多行註釋
     */
    function func2() {
      // 這是js單行註釋
      /*
        這是js多行註釋
      */
      console.log('test');  /* 
      這是js多行註釋 */
    } 
  </script>
</body>

</html>

匹配

const htmlStr = `html字符串`;   // 將上面的html內容拷貝於此，因爲太長，就再也不拷貝

// 匹配 /* */
htmlStr.match(/\/\*[^]*?\*\//g);  // 該行代碼會返回一個數組，長度爲10，數組的每一個元素分別對應匹配到的 /* */，因爲篇幅有限，就不將結果展現到這裏了

// 匹配 <!-- -->
htmlStr.match(/<!--[^]*?-->/g);

// 匹配 //
htmlStr.match(/(\/\/.*?(?=(["']\s*\w+\s*=)|(["']\s*>)))|(\/\/.*)/g);

分析

g全局修飾符。g是正則表達式的修飾符，表示全局匹配或者搜索，由於html中會有多個註釋，因此須要全局修飾符（點擊查看所有修飾符）。
[^]。^被稱爲脫字符，個人理解就是取反的意思，好比[ ^abc ]表示除了a、b和c，其餘全部字符均可以匹配。[^]匹配任意字符，包括換行符。
非貪婪模式。量詞符在默認狀況下都是使用貪婪模式進行匹配，好比說上面的[^]*表示匹配0個或多個任意字符，因爲是貪婪模式，因此會盡量多的匹配任意字符，直到不知足條件爲止。經過在[^]*後面加一個？號，就變成了非貪婪模式，這種模式下，一旦條件知足，就不會再往下匹配。想要實際查看兩種模式的區別，能夠將上方匹配 /* */的正則表達式的？去掉再執行，看看返回結果有何不一樣。
向前查找。向前查找就是一個以？=開頭的子表達式。舉例說明其意義，好比咱們要匹配出URL的協議部分，URL：https://www.forta.com，正則：/.+(?=:)/，(?=:)就是一個向前查找，它表示只要匹配到:，就把：以前的內容返回，:自己不須要返回。
前面兩種註釋的匹配比較容易，第三種也就是//這種註釋比較複雜。其實對於//註釋，在絕大多數狀況下/\/\/.*/這個正則能夠匹配出，可是有兩種狀況不能知足，見下方代碼

<button onclick="
    alert('july')
    //這是行內js的註釋 'sdfs' " style='color: blue'>click me 3</button>
    
<button onclick="
    alert('july')
    //這是行內js的註釋 'sdfs' ">click me 3</button>

咱們經過圖片詳細解析一下
php

最終代碼

爲了方便，最終代碼選擇在node環境中執行，由於最初的需求是將html中的全部註釋去掉，因此咱們使用了字符串的replace方法，該方法接收兩個參數，第一個參數是正則表達式，第二個參數是須要替換成的內容。css

const fs = require('fs');

// regex.html 是放在同級目錄下的html源文件
fs.readFile('./regex.html', 'utf8', (err, data) => {
  if (err) throw err;

  console.log(
    data
      .replace(/\/\*[^]*?\*\//g, '')    // 替換 /* */
      .replace(/<!--[^]*?-->/g, '')     // 替換 <!-- -->
      .replace(/(\/\/.*?(?=(["']\s*\w+\s*=)|(["']\s*>)))|(\/\/.*)/g, '')  // 替換 // 
  );
});