JavaScript正則表達式入門

時間 2019-11-29

原文原文鏈接

JavaScript正則表達式入門

經常用戶在一個網頁裏登陸註冊賬號時，要輸入用戶名、手機號、郵箱地址、設置密碼等項目。而對於用戶輸入的用戶名是否規範，輸入的是不是郵箱地址、密碼強度如何等等均可以經過一正則表達式制定相應的規則來驗證校檢，來實現一個很是複雜的業務邏輯。javascript

在編寫處理字符串的程序或網頁時，常常有查找符合某些特定規則的字符串的須要。正則表達式就是用於描述這些規則的工具。正則表達式英文全稱爲(Regular Expression)，前端

正則表達式能夠作什麼，總之須要抽取某字符串特定的數據和字段，都應用到了正則表達式。
- 前端數據的校檢
  - 知道這20個正則表達式，能讓你少寫1,000行代碼
- 大數據，採集爬取
  - 利用爬蟲技術能作到哪些很酷頗有趣頗有用的事情？

建立正則表達式

使用正則表達式字面量java

// 語法： /pattern/flag
  const reg = /at/g; // g可選，表明全局模式，匹配全部含有"at"的字符串

使用RegExp對象構造函數，能夠實現正則表達模式隨時改變，適用於必須在運行時動態生成正則表達式的情形，如用戶輸入正則表達式

// 語法： new RegExp(pattern [, flags]) 
  let regex = new RegExp('ab+c', 'g');
  let regex = new RegExp(/.at/gi);

  // str爲用戶要查詢的值,trim()用於去除字符串的前置和後置空格
  let str = document.getElementById('u-input').value.trim(); 
  let re = new RegExp(str, 'g');

正則表達式語法

正則表達式必須寫在一行中，由於它們不支持註釋和空白c#

一個用來匹配URL的正則表達式以下：數組

var parseUrl = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;  

var url = "http://www.ora.com:80/goodparts?q#fragment";

var result = parseUrl.exec(url); 
// exec()方法成功匹配字符串的話，則返回一個字符串片斷組成的數組

正則表達式對應的結構圖（右鍵新標籤看大圖）
ide

正則表達式被包圍在一對斜槓//中，表示開始符和結束符。
容器：() [] {}
- ()一對括號爲一個捕獲組
- []做爲一個字符集合，匹配方括號中的任意字符。
- {}後綴裏面的數字決定這個因子應該被匹配的次數，(/){0,3} 表示/會被匹配0次，或者1~3次。
捕獲組與非捕獲型組
- 捕獲型組格式：(. . .)會複製它所匹配的文本，放到result數組裏。
- 非捕獲型組格式：(?: . . .) 只是匹配文本，不保存到result數組裏。若是不須要使用匹配後的文本，一般用非捕獲型來替代少許不優美的捕獲型分組，由於捕獲會有性能上的損失。
/^... $/
- ^和$分別置於模式的最前和最後，表示匹配字符串的開始和結束，保證開頭和結尾沒有多餘的內容。
^在不一樣位置表示不一樣的意思。
- 字符類[^?#]以^開始，表示這個類包含除?#外的全部字符。
- 位於整個模式字符類的開頭，則表示此字符串的開始，只匹配那些從開頭就像該字符串（URL）同樣的字符串。
?位於前綴和後綴
- 後綴，如-?表示這個負號是可選的，(...)?表示這個分組是可選的
+和*
- 後綴+表示匹配一個或多個，至關{1,}。
- 後綴*表示匹配0個或多個,至關{0,}。

更多特殊字符用法，見MDN正則表達式中的特殊字符函數

元字符

像上面闡釋那些具備特殊功能的字符工具

/ [ ] () { } ? + * | . ^ $性能

普通字符

除了元字符外，其餘均是普通字符能夠直接按字面處理使用，固然若是要使用元字符以及一些控制字符如 - (範圍像是A-Z，加上轉義能夠看成負號來用) ，能夠經過在其前面加上轉義\符號來去除它自身的特殊用途，即便其字面化。值得注意的是，\ 不能前綴不能使字母或數字字面化。

正則表達式筋骨脈絡圖

主體結構

分支

序列

因子

轉義

字符集

字符轉義

分組

量詞

兩個重要方法test()和exec()

regexp.exec(string)

exec()方法在一個指定字符串中搜索匹配，找到返回一個數組，並更新正則表達式兌現的屬性。返回的數組徹底匹配成功的文本做爲第一項，將正則括號裏匹配成功的做爲數組填充到後面。匹配失敗則返回Null。若是隻是爲了判斷是否匹配，則可使用RexExp.test()或者String.search()。

var matches = /hello \S+/.exec('This is a hello world!');
console.log(matches[0]);  // 'hello world!'

當rexExp帶有g標誌（全局搜索全部匹配的字符串）時，能夠屢次執行exec()查找全部匹配，即一個匹配模式在同一個字符串中發生了幾回。

regexp.test(string)

test()執行一個檢索，若是regexp與string匹配，則返回true，不然返回false。
可用於if條件語句中

function testinput(re, str) {
    if(re.test(str)) {
        // 要執行的語句           
    } else {
        // 要執行的語句       
    }
}

一些例子

由於正則表達式是有關字符串的複雜規則的，因此字符串String的匹配、替換、查找等方法均可以傳入正則表達式做爲參數，處理正則表達式的方法有regexp.exec、regexp.test、string.match、string.replace、string.search和string.split。

把String對象分割成字符串數組

需求：利用正則表達式分割用戶輸入的字符，容許一次批量輸入多個內容，格式能夠爲數字、中文、英文等，能夠經過用回車，逗號（全角半角都可），頓號，空格（全角半角、Tab等都可）等符號做爲不一樣內容的間隔

// 指定的分隔符
var re = /[-,，、.\s]+/g;  
// 也可使用Unicode編碼表示 re = /[\u002c\uff0c\u3001\s]+/g;
// 能夠聲明一個空的數組容器
var data = [];

法一：RegExp.protype[@@split]()方法

// 語法：str.split([separator[,limit]])

  // str爲用戶輸入的值
  data = data.concat(str.split(re));

法二：String.protype.split()

// 語法：regexp[Symbo.split](str[,limit])

  data = data.concat(re[Symbol.split](str));

兩個方法的使用方法相同，只是this和參數順序不一樣。

使用正則表達式匹配實現輸入查詢

已知存在一個數組data，如今用戶輸入一個值來查詢是否存在某個字符串，匹配到且作必定標識（如顏色的改變）

法一：使用正則表達式reg.test()方法，找到返回true，不然爲false。

data.forEach(function (element, index, array) {
      // str爲用戶要查詢的值
      var re = new RegExp(str, 'g');

      // 匹配到的內容則改變背景顏色，沒有匹配到的則爲默認顏色
      if (re.test(element.innerHTML)) {
          element.style.background = '#49b310';
          element.style.border = '1px solid #ccc';
      } 
      else {
          element.style.background = '#ff3f41';
      }
  });