正則表達式（Regular Expression，RegExp）相信對很多人來說，是一個‘熟悉的陌生人’。熟悉是因為我們知道他是很多語言不可缺少的一部分啃憎，而且很高效，但又會因為其相對復雜難記的規(guī)則而感到陌生Ｋ蒲住（總是以為記住了辛萍，到用時卻。羡藐。叹阔。拼命翻書ing）但是作為一名合格的程序員，尤其前端程序員传睹，需要經常處理一些字符串或者從文本中篩選一些信息，那么對正則的掌握必不可少０痘蕖（我有什么辦法欧啤，自己選的路睛藻，哭著也要學啊邢隧！暗暧　！暗够邸０凑）

image.png

1. 表達式結構和聲明

正則表達式基本結構包括兩部分，匹配規(guī)則和標識符纫谅，其中匹配規(guī)則包含在兩個‘/’中炫贤，標識符在最后，形如/匹配規(guī)則/標識符

• 標識符包括
  1. g：global付秕，全局
  2. i：ignoreCase兰珍，大小寫不敏感
  3. m：multiline，匹配多行
• 對象聲明方式有兩種：
  1. 字面量询吴，即let reg = /[abc]/i
  2. 通過new關鍵字掠河，如let reg = new RegExp('[abc]','i')，構造函數(shù)包括兩個參數(shù)猛计，參數(shù)一字符串表達式（有些字符需要轉義唠摹，如雙引號''等），參數(shù)而為標識符
• 對象屬性
  1. global奉瘤、ignoreCase勾拉、multiline分別對應標識符g i m使用狀況
  2. lastIndex：下一次exec匹配開始的索引
  3. source：正則表達式源碼文本
• 方法
  1. test：測試，返回boolean類型
  2. exec：執(zhí)行毛好，返回匹配的字符串及分組

2. 表達式因子

所謂的匹配規(guī)則望艺，便是有限個表達式因子的規(guī)則組合，組合規(guī)則當然要根據其功能來決定肌访。主要的表達式因子及其含義如下找默，式中...代表需要填入的內容：

• /:前面提到的表達式結構的一部分，由兩個/包含規(guī)則便創(chuàng)建了一個字面量正則表達式吼驶，如/ab/i惩激，匹配帶有ab的字符串
• \:轉義符，相信有編程基礎的都應該知道蟹演，想要吧一些特殊字符當做字符串處理或者表示一些字符串不能表示的字符需要轉義风钻，如/\/a/，匹配帶有/a的字符串酒请，而/n表示換行符等骡技。RegExp中需要轉移的因子大致有\/[](){}?+-*|.^$等
• ^:當在匹配規(guī)則前面使用時表示開始符，如/^[ac]/，表示匹配以a或c開始的字符串布朦；但當在一個字符類前面使用時表示取反,如/^[^ac]/表示

// RegExp
// 執(zhí)行函數(shù)
function exec(reg,str){
    let result = reg.exec(str)
    console.log(result)
    return result
}
// 匹配以a開始的字符串
let reg = /^[a]/,
str1 = 'and',
str2 = 'but'
exec(reg,str1) // [ 'a', index: 0, input: 'acnd' ]
exec(reg,str2) // null
// 取反 匹配不以a開始的字符串
reg = /^[^a]/
exec(reg,str1) // null
exec(reg,str2) // [ 'b', index: 0, input: 'but' ]

• $：結束符囤萤，顯而易見，就是匹配以某種形式結束的字符串

// 匹配不以結尾的字符串
reg = /[^t]$/
exec(reg,str1) // [ 'd', index: 2, input: 'and' ]
exec(reg,str2) // null

• -: 表示范圍是趴，如[a-z]涛舍，表示小寫字母a至z;當需要表示-是需要轉義，即/\-/,即匹配含有-的字符串
• +: 表示必選唆途，需要匹配的字符至少出現(xiàn)一次富雅，也可表示為{1,}
• ?: 表示可選，需要匹配的字符出現(xiàn)0或1次肛搬，也可表示為{0,1}
• *: 表示可有可無没佑，需要匹配的字符出現(xiàn)0或多次，也可表示為{0,}
• [...]:方括號表示一個字符類滚婉，如[abc]图筹、[123]或者[abc123]，類似于編程里面的Class
• {m,n}:花括號表示對匹配字符出現(xiàn)次數(shù)的限定让腹，其中m為最少出現(xiàn)次數(shù)远剩，n為最多出現(xiàn)次數(shù)；當出現(xiàn)次數(shù)最多沒有限制的時候骇窍，n可空缺
• (...):圓括號括起來的內容表示一個捕獲分組
• (?:...):圓括號內以?:開始的為非捕獲分組瓜晤，不會返回字符串分組，效率更高

// 下邊來比較一下捕獲分組與不可捕獲分組的區(qū)別
let str  = 'Hello World!',
// 捕獲分組
reg = /([a-z]+)\s([a-z]+)/i
let resultAry =exec(reg,str) // [ 'Hello World',  'Hello',  'World',  index: 0,  input: 'Hello World!' ]

// 插一句 獲取分組結果的方式
// 方式1 數(shù)組索引 o為原始字符串腹纳，后續(xù)為分組
console.log(resultAry[1]) // 分組1：'Hello’
console.log(resultAry[2])  // 分組2：'World’

// 方式2 通過RegExp對象的'$索引'來獲取痢掠，索引范圍'1-9';但是這種方式需要在'reg.exec或test'后立即調用，或者字符串的`match嘲恍、search足画、split`等方法
console.log(RegExp.$1) // 分組1：'input’
console.log(RegExp.$2)  // 分組2：'’
// 像這樣才有效
reg.exec(str) 
console.log(RegExp.$1) // 分組1：'Hello’
console.log(RegExp.$2)  // 分組2：'World’

// 非捕獲分組
reg = /(?:[a-z]+)\s(?:[a-z]+)/i
exec(reg,str) // [ 'Hello World', index: 0, input: 'Hello World!' ]
// 通過比較我們發(fā)現(xiàn)，非捕獲分組確實不會返回字符串分組佃牛，即['Hello','World']

• .: 匹配除換行符 \n 之外的任何單字符
• \d: 匹配數(shù)字淹辞，相當于[0-9]
• \s: 匹配空白（whitespace）

3. 舉例分析：郵箱地址匹配

假設郵箱驗證規(guī)則為：只允許英文字母、數(shù)字俘侠、下劃線象缀、英文句號、以及中劃線組成爷速，且下劃線和中劃線不得出現(xiàn)在開始和結束位置央星，區(qū)分大小寫。

let reg = /^([a-zA-Z0-9]+[_\-]?[a-zA-Z0-9]+)@([a-zA-Z0-9]+[_\-]?[a-zA-Z0-9]+).([a-zA-Z]+)$/;

let email1 = '@hsajdh.com',
    email2 = '_dnaksl_@.com',
    email3 = '-absdbn_dnaksl_@hsajdh.',
    email4 = 'absdbn_dnaksl@hsajdh.com_',
    email5 = 'absdbn_dnaksl@hsajdh.com'

console.log(reg.test(email1)) // false
console.log(reg.test(email2)) // false
console.log(reg.test(email3)) // false
console.log(reg.test(email4)) // false
console.log(reg.test(email5)) // true

• 解釋說明
  1. 首先郵箱地址分為三組惫东，名稱@域名.后綴（假設只有一級域名）莉给，得到/^()@().()$/
  2. 名稱由字母、數(shù)字、下劃線和中劃線組成禁谦，且下劃線和中劃線必須出現(xiàn)在中間(可選胁黑，記得中劃線要轉義)，得到([a-zA-Z0-9]+[_\-]?[a-zA-Z0-9])+
  3. 域名和名稱規(guī)則一樣州泊，也為([a-zA-Z0-9]+[_\-]?[a-zA-Z0-9])+
  4. 后綴只能回字母，得到[[a-zA-Z]+]
  5. 最終的表達式為/^([a-zA-Z0-9]+[_\-]?[a-zA-Z0-9]+)@([a-zA-Z0-9]+[_\-]?[a-zA-Z0-9]+).([a-zA-Z]+)$/

參考

• JavaScript語言精粹》
• 博客園
• CSDN

如果您感覺有所幫助漂洋，或者有問題需要交流遥皂，歡迎留言評論，非常感謝刽漂！
前端菜鳥演训，還請多多關照！

• Git： BuggMaker
• 博客：倒霉蛋兒_才才