溫故js系列（5）-正則表達式&常用代碼

glumes 發(fā)布于2019-08-21 14:04 / 3024人閱讀

摘要：的對象表示正則表達式，而和都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數(shù)。對象也提供了個使用正則表達式的方法。如正則表達式將匹配除了和所有大寫字母之外的任何字符。

前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：正則表達式

JavaScript-正則表達式 正則表達式簡述

正則表達式(regular expression)描述了一種字符串匹配模式，可以用來檢查一個字符串是否含有某類字符串、將匹配的字符串做替換或者從某個字符串中取出符合某個條件的字符串等。ECMAScript的RegExp對象表示正則表達式，而String 和RegExp 都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數(shù)。

正則表達式修飾符

參數(shù)       含義                           備注
i       忽略大小寫
g       全局匹配
m       多行匹配
u       正確處理四個字節(jié)的UTF-16編碼       ES6新增
y       確保匹配必須從剩余的第一個位置開始   ES6新增

正則表達式創(chuàng)建

創(chuàng)建正則表達式和創(chuàng)建字符串類似，創(chuàng)建正則表達式提供了兩種方法，一種是采用new
運算符，另一個是采用字面量方式。

var xzavier = new RegExp("xzavier");       //第一個參數(shù)字符串
var xzavier = new RegExp("xzavier", "ig"); //第二個參數(shù)可選修飾符
var xzavier = /xzavier/;                   //直接用兩個反斜杠
var xzavier = /xzavier/ig;                 //第二個斜杠后面加上的是修飾符

和對象數(shù)組等一樣，我們一致推崇使用字面量的方式。簡便快捷。但是也有必須使用new的方式，
當你的正則表達式中含有變量的時候：

var reg = "v";
var pattern = new RegExp("xza" + reg + "ier"); // 這時候就不能使用字面量的方式了

正則表達式方法

RegExp 對象的test() 方法在字符串中查找是否存在指定的正則表達式并返回布爾值，如果存在則返回true，不存在則返回false。

var pattern = new RegExp("xzavier", "i");  //正則模式，不區(qū)分大小寫
var pattern1 = /xzavier/i; //創(chuàng)建正則模式，不區(qū)分大小寫
var str = "This is Xzavier!"; 
console.log(pattern.test(str));  //true
console.log(pattern1.test(str));  //true
console.log(/xzavier/i.test(str));  //true

RegExp 對象的exec()方法也用于在字符串中查找指定正則表達式，如果exec()方法執(zhí)行成
功，則返回包含該查找字符串的相關(guān)信息數(shù)組。如果執(zhí)行失敗，則返回null。

var pattern = new RegExp("xzavier", "i"); 
var pattern1 = /xzavier/i; 
var str = "This is Xzavier!"; 
console.log(pattern.exec(str));  //["Xzavier"]
console.log(pattern1.exec(str));  //["Xzavier"]
console.log(/xzavier1/i.exec(str));  //null

String 對象也提供了4 個使用正則表達式的方法。
match(pattern) 返回pattern中的匹配的字符串或null:

var pattern = /xzavier/ig;   //全局匹配
var str = "This is Xzavier, this is Xzavier too."; 
console.log(str.match(pattern));  //["Xzavier", "Xzavier"]
console.log(str.match(pattern).length);  //2
console.log("javascript".match(/xzavier/ig));  //null

replace(pattern, replacement) 用replacement替換pattern:

var pattern = /xzavier/ig;  
var str = "This is Xzavier, this is Xzavier too."; 
console.log(str.replace(pattern, "JavaScript"));  //This is JavaScript, this is JavaScript too.

search(pattern) 返回字符串中pattern開始位置,查找到返回位置，否則返回-1:

var pattern = /xzavier/i;  
var str = "This is Xzavier, this is Xzavier too."; 
var str1 = "This is JavaScript, this is JavaScript too."; 
console.log(str.search(pattern));   //8
console.log(str1.search(pattern));   //-1

split(pattern) 返回字符串按指定pattern 拆分的數(shù)組:

var pattern = / /ig;  
var str = "This is Xzavier, this is Xzavier too."; 
console.log(str.split(pattern));   //["This", "is", "Xzavier,", "this", "is", "Xzavier", "too."]

RegExp對象的靜態(tài)屬性

屬性              短名      含義
input             $_    當前被匹配的字符串
lastMatch         $&    最后一個匹配字符串
lastParen         $+    最后一對圓括號內(nèi)的匹配子串
leftContext       $`    最后一次匹配前的子串
rightContext      $"    在上次匹配之后的子串

var pattern = /(x)zavier/;
var str = "This is xzavier！";
pattern.test(str); 
console.log(RegExp.input); //This is xzavier！
console.log(RegExp.leftContext); //This is 
console.log(RegExp.rightContext); //！
console.log(RegExp.lastMatch); //xzavier
console.log(RegExp.lastParen); //x

RegExp對象的實例屬性

屬性                   含義
global       Boolean值，表示g是否已設(shè)置
ignoreCase   Boolean 值，表示i 是否已設(shè)置
lastIndex    整數(shù)，代表下次匹配將從哪里字符位置開始
multiline    Boolean值，表示m是否已設(shè)置
Source       正則表達式的源字符串形式

var pattern = /xzavier/ig;
console.log(pattern.global); //true，是否設(shè)置了全局
console.log(pattern.ignoreCase); //true，是否設(shè)置了忽略大小寫
console.log(pattern.multiline); //false，是否設(shè)置了換行
console.log(pattern.lastIndex); //0，下次匹配位置
console.log(pattern.source); //xzavier，正則表達式的源字符串

正則表達式元字符 字符類：單個字符和數(shù)字

說一下/./ 和 /[.]/ 只能匹配".",不匹配通配符

引用符，用來將這里列出的這些元字符當作普通的字符來進行匹配。如.用來匹配點字符，而不是任何字符的通配符。

[ ],[c1-c2],[^c1-c2]
　　字符組，匹配括號中的任何一個字符,并不是要全部匹配。如/x[zav]e/匹配xze、xae和xve，但是不匹配xxe。如/[0-9]/可以匹配任何數(shù)字字符；如/[A-Za-z]/可以匹配任何大小寫字母。如正則表達式[^269A-Z] 將匹配除了2、6、9和所有大寫字母之外的任何字符。

對于這兩個操作符，特殊符號沒有絕對規(guī)律，倒是特殊字母匹配符還是有規(guī)律的，見下

"love.".replace(/./, "");  //"ove."  通配
"love.".replace(/./, "");  //"love"  點
"love.".replace(/[.]/, ""); //"love"  點
"love.".replace(/[.]/, ""); //"love"  點

但是：

"lo v^se.".replace(/^/, ""); //"lo vse."  匹配^
"lo v^se.".replace(/[^]/, "");  //"o v^se." 匹配開始去了，并沒有匹配^
"lo v^se.".replace(/[^]/, ""); //"lo vse." 要加一個這樣才匹配^


"lo vse.".replace(/s/, "");  //"lovse." 匹配空格
"lo vse.".replace(/[s]/, ""); //"lo ve."  匹配字母
"lo vse.".replace(/[s]/, "");  //"lovse."  要加一個才匹配空格

"    lovte.".replace(/	/, "");  //"lovte. 匹配制表符
"    lovte.".replace(/[t]/, ""); //"    love."  匹配字母
"    lovte.".replace(/[	]/, "");  //"lovte."  要加一個才匹配制表符

字符類：空白字符

是匹配字符串開頭結(jié)尾及空格回車等的位置,單詞邊界, 不會匹配空格符本身。s則是匹配空白字符本身、空格符本身、換行符本身。

字符類：錨字符

字符類：重復(fù)字符

字符類：替代字符

a|b|c    匹配a或b或c中的任意一個

字符類：記錄字符

$n     與 regexp 中的第 n(1~99) 個子表達式相匹配的文本
$&     表示與 regexp 相匹配的子串
$`     位于匹配子串左側(cè)的文本
$"     位于匹配子串右側(cè)的文本
$$     直接量符號

"you are beautiful".replace(/beautiful/g, "so $&");  //"you are so beautiful"
"leftright".replace(/right/, "$`");  //"leftleft"
"leftright".replace(/left/, "$"");  //"rightright"

貪婪模式和惰性模式

貪婪  惰性
"+"   +?
?     ??
*    *?
{n}   {n}?
{n,}  {n,}?
{n,m} {n,m}?

var pattern = /[a-z]+/; //貪婪匹配，全部替換
var str = "qqqwwweee";
var result = str.replace(pattern, "xxx");
console.log(result);  //xxx

var pattern = /[a-z]+?/; //?號關(guān)閉了貪婪匹配，只替換了第一個
var str = "qqqwwweee";
var result = str.replace(pattern, "xxx");
console.log(result);  //xxxqqwwweee

斷言

先行斷言： x(?=y)，找到x后面緊跟著y的位置，如果找到則匹配這個位置

var pattern = /(xza(?=vier))/; //xza后面必須跟著vier才能捕獲
var str = "hello,xzavier";
console.log(pattern.test(str));  //true

先行否定斷言 x(?!y)，找到x后面不是y的位置，如果找到則匹配這個位置

var pattern = /(xza(?!vier))/; //xza后面必須跟著的不是vier才能捕獲
var str = "hello,xzaqqqvier";
console.log(pattern.test(str));  //true

可惜，JavaScript不支持后行斷言和后行否定斷言。
當然，現(xiàn)在不支持，不代表未來不支持。雖然外面最新的ES6也沒有推出正式的標準，但是已經(jīng)有了提案，ES7中應(yīng)該會推出標準實現(xiàn) 后行斷言和后行否定斷言。
屆時我們可能就能用到這兩個功能，這樣的代碼了：

var pattern = /(?=xza)vier/; //vier前面必須是xza才能捕獲
var str = "hello,xzavier";
console.log(pattern.test(str));  //true

var pattern = /(?!xza)vier)/; //vier前面必須不是xza才能捕獲
var str = "hello,xzaqqqvier";
console.log(pattern.test(str));  //true

這代碼現(xiàn)在是不能使用的，但是我們想要實現(xiàn)類似的功能，用別的方式，多寫兩行代碼也就實現(xiàn)了。

捕獲性分組和非捕獲性分組

捕獲性分組

var pattern = /(d+)([a-z])/; //捕獲性分組
var str = "123abc";
console.log(pattern.exec(str));  //["123a", "123", "a"]

非捕獲性分組格式: (?:x)

var pattern = /(d+)(?:[a-z])/; //非捕獲性分組
var str = "123abc";
console.log(pattern.exec(str));  //["123a", "123"]

常用正則表達式

親測有效：

匹配中文字符： [u4e00-u9fa5]
匹配Email地址：w[-w.+]*@([A-Za-z0-9][-A-Za-z0-9]+.)+[A-Za-z]{2,14}/
去除首尾空白：/(^s*)|(s*$)/g
去除多余空格：/s/g
身份證：d{17}[d|x]|d{15}
ip地址：d+.d+.d+.d+
網(wǎng)址URL： ^((https|http|ftp|rtsp|mms)?://)[^s]+
QQ號：[1-9]{4,}
數(shù)字串千分法：

function commafy(num){
      return num && num
          .toString()
          .replace(/(d)(?=(d{3})+.)/g, function($1, $2){
              return $2 + ",";
          });
  }
  commafy(1234567.002);
  // 1,234,567.002"

判斷手機app內(nèi)置瀏覽器：

var ua = navigator.userAgent.toLowerCase(),
    isWx = /microMessenger/i.test(ua),
    isQQ = /s+qq//ig.test(ua),
    isQZone = /qzone/i.test(ua),
    isWeibo = /weibo/i.test(ua);

首字母大寫：

str = "hello woRld";
String.prototype.initCap = function () {
   return this.toLowerCase().replace(/(?:^|s)[a-z]/g, function (s) {
      return s.toUpperCase();
   });
};
console.log(str.initCap());  //Hello World

"yyyy-mm-dd" 格式的日期校驗(平閏年)：

function testDate(str) {
    var reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
    return reg.test(str);
}
testDate("2016-03-12"); //true
testDate("2016-23-12"); //false
testDate("2016-02-29"); //true
testDate("2017-02-29"); //false

延伸閱讀：正則表達式的擴展
測試：在線正則表達式測試