前端學習筆記-正則表達式

相關符號的含義

圖片總結

正則表達式的組成

let reg = /pattern/flags;
複製代碼

其中pattern(模式)是正則表達式的主體。flags(標記)，用於控制正則表達式的行爲。flags的取值有如下幾種

• g：全局模式，表示查找字符串的所有內容，而不是找到第一個匹配的內容就結束。
• i：不區分大小寫，表示在查找匹配時忽略pattern和字符串的大小寫。
• m：多行模式，表示查找到一行文本末尾時會繼續查找。
• y：粘附模式，表示只查找從1astIndex開始及以後的字符串。
• u：Unicode模式，啓用Unicode匹配。
• s:dotA11模式，表示元字符.匹配任何字符(包括\n或\r)。

從這裏能夠看出，前邊圖中說元字符.匹配除換行符以外的任何字符是不許確的。若是加上s標誌，則能夠匹配任意字符

元字符

元字符共有14個，在使用的時候須要加上\進行轉義 {}[]()^$\|?*+.

中括號[]

• [-.]表示符號-或者.號(注意這裏，在[]中的.號表明的就是這個符號，可是若是在其外面，表示個匹配全部。 因此若是不在[]之中，想要匹配'.'，就要經過轉意符號.)
• 在[]中，特殊字符不須要轉義，能夠直接使用，好比[.()],可是在外面，是須要轉義的( .等
• []中的^標識非，[]外的^標識開頭標識
• [abc]表示a或者b或者才，但/abc/表示連續的abc字符
• 在分組中表示或的方式(a|b),a或者b，對應[ab]
• []中須要進行轉義的字符有[]^-，其餘的元字符不須要轉義便可使用

關於\b

可參考 正則表達式之 \b

• \b 匹配這樣的位置：它的前一個字符和後一個字符不全是(一個是,一個不是或不存在) \w。
• 換一種說法就是：它的前一個「顯式位置」字符和後一個「顯式位置」字符不全是 \w。

RegExp和String相關的正則操做

test

• 屬於正則的方法，判斷一個字符串是否符合正則表達式的約束
• 用法如reg.test(str)返回值只多是false或者true

exec

• 屬於正則的方法，找出字符串中符合該正則的片斷
• 用法如reg.exec(str)返回一個數組，數組的長度大於等於1，第一項是匹配的片斷，若是正則裏有分組()，則該數組從第二項依次是是 $1,$2,...分組匹配到的內容

const str = '1234';
const reg1 = /\d{1}(\d{1})/g;//帶有g表示匹配字符串中的全部片斷
console.log(reg1.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
console.log(reg1.exec(str));//["34", "4", index: 2, input: "1234", groups: undefined]
console.log(reg1.exec(str));//null

const reg2 = /\d{1}(\d{1})/;//不帶g，表示匹配到第一個知足的片斷，就再也不繼續匹配
console.log(reg2.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
console.log(reg2.exec(str));//["12", "2", index: 0, input: "1234", groups: undefined]
複製代碼

須要注意帶有標識g和不帶標識g，exec會有不同的特性

match

• 屬於字符串的方法，找出字符串中符合該正則的片斷，和exec相似
• 用法如str.match(reg)返回一個數組，須要注意g標識的區別

const str = '1234';
const reg1 = /\d{1}(\d{1})/g;
const reg2 = /\d{1}(\d{1})/;
console.log(str.match(reg1));//["12", "34"]
console.log(str.match(reg2));//["12", "2", index: 0, input: "1234", groups: undefined]
複製代碼

replace

• 屬於字符串的方法，對字符串中正則匹配到的片斷進行替換操做
• 用法如str.repalce(reg, param)返回一個新的字符串。param第二個參數能夠是一個字符串，或者一個返回替換內容的函數。

split

• 屬於字符串的方法，按照一個正則表達式的匹配，將字符串拆分爲數組
• 用法如str.split(param)返回一個數組。param第二個參數能夠是一個字符串，或者一個正則表達式。

關於replace的匹配細節

const str = '1335555666617788884444';
const reg1 = /(?<=\d{3})\d{4}(?=\d{4})/g;
const reg2 = /(?<=\d{3})\d{4}(?=\d{4})/;
console.log(str.match(reg1));//"["5555", "6666", "1778"]"
console.log(str.replace(reg1,'****'));//"133************8884444"
console.log(str.replace(reg2,'****'));//"133****666617788884444"
複製代碼

replace要替換的內容，和str.match(reg)匹配到的內容是對應的。而str.match(reg)和reg.exec(str)效果又是類似的。

能夠從如下例子看出匹配過程

const str = '1335555666617788884444';
const reg1 = /(?<=\d{3})\d{4}(?=\d{4})/g;
let match;
console.log(reg1.lastIndex);//0
while(match !== null){
    match = reg1.exec(str);
    //每次進行一個exec，reg1的lastIndex會響應的增長，
    //增長的值等於，匹配到的字符的位置+匹配字符的長度
    console.log(match);//會打印出每次exec的匹配項
    console.log(match && match.index, reg1.lastIndex);
    //macth是匹配項在目標字符串str中的索引值
    //reg1.lastIndex表示下一次匹配將從這個索引值的位置開始
}
複製代碼

打印結果以下

由此能夠得出結論。

• 1335555666617788884444最早被匹配到的內容是5555,字符串被替換爲133****666617788884444這時，reg的lastIndex值再也不爲0，變爲7，下一次匹配會從索引值爲7的位置繼續匹配。
• 匹配到6666，替換爲****，reg的lastIndex值變爲11;匹配到1778，reg的lastIndex值變爲15;後面的內容8884444再也不知足匹配規則，匹配完畢，reg的lastIndex值變爲0

關於貪婪和惰性

字符串1234用/\d{1,3}/g和/\d{1,3}?/g匹配，會有不同的結果

const str = '1234';
const reg1 = /\d{1,3}/g;
const reg2 = /\d{1,3}?/g;
console.log(str.match(reg1));//["123","4"]
console.log(str.match(reg2));//["1","2","3","4"]
複製代碼

沒有加惰性符號?時，匹配默認是貪婪的，\d{1,3}匹配長度爲1-3的數字，貪婪的匹配時沒回都按最多的來，因此會有"123"，加了?表明惰性匹配，按最少的來，因此會是"1"

再好比，咱們要匹配一個標籤中的href連接的話，則運用惰性標識?會頗有用

const str = '<a href="https://www.baidu.com" id="cscs" title="一個連接">測試文字</a>';
const reg1 = /".+"/g;
const reg2 = /".+?"/g;
console.log(str.match(reg1));//只匹配到1項
//["\"https://www.baidu.com\" id=\"cscs\" title=\"一個連接\""]

console.log(str.match(reg2));//匹配到3項
//["\"https://www.baidu.com\"", "\"cscs\"", "\"一個連接\""]
複製代碼

幾種表明性的正則寫法

金額類數字,劃分

將一個金額11222333444轉爲11,222,333,444的形式;

const str = '111333222';
const reg1 = /(\d{1,3})(?=(\d{3})+$)/g;
const reg2 = /(\d)(?=(\d{3})+$)/g;
const reg3 = /(?<=\d)(?=(\d{3})+$)/g;
const str2 = str.replace(reg1, '$1,');
const str3 = str.replace(reg3, ',');
const str4 = str.replace(reg2, '$1,');
const str5 = str.replace(reg1, function(match){
    return match+',';
});
console.log(str.match(reg1));//["11", "222", "333"]
console.log(str.match(reg2));// ["1", "2", "3"]
console.log(str.match(reg3));//["", "", ""]
console.log(str2);//11,222,333,444
console.log(str3);//11,222,333,444
console.log(str4);//11,222,333,444
console.log(str5);//11,222,333,444
複製代碼

• 須要注意兩種RegExp匹配到的內容是不一樣的，經過reg3能夠看出，正則能夠直接匹配到字符串之間的空白
• reg3若是是/(?=(\d{3})+$)/g則會存在缺陷，由於

'111222333'.replace(/(?=(\d{3})+$)/g, ',');//,111,222,333
複製代碼

因此須要對前邊的字符進行限制

• 另外number有toLocaleString方法，能夠直接作這樣的轉換

下劃線轉駝峯命名

const str = 'get_my_color';
const str2 = str.replace(/_([a-z])/g, (item, $1) => $1.toUpperCase());
console.log(str2);
複製代碼

電話號碼隱藏中間4位

const str = '13311112222';
const str2 = str.replace(/(\d{3})(\d{4})(\d{4})/, '$1****$3');
const str3 = str.replace(/(\d{3})(?:\d{4})(\d{4})/, '$1****$2');
const str4 = str.replace(/(?<=\d{3})\d{4}(?=\d{4})/, '****');
console.log(str2);//133****2222
console.log(str3);//133****2222
console.log(str4);//133****2222
複製代碼

str2和str4匹配到的內容是不一樣的

判斷一個字符串中出現次數最多的字符，並統計次數

這裏是對分組的應用例子

const str = 'aaabbbcccaaabbbaaa';
const str2 = str.split('').sort().join('');  //"aaaaaaaaabbbbbbccc"
const arr = str2.match(/(\w)\1+/g);//對\1的應用
arr.sort(function(a,b) {
    return b.length - a.length;
});//按從大到小排序
console.log(arr);//["aaaaaaaaa", "bbbbbb", "ccc"]
console.log(arr[0]);//aaaaaaaaa
複製代碼

字符串中空白插入指定字符

將qwer轉爲qwer*

const str = 'qwer';
const reg1 = new RegExp('', 'g');
const reg2 = /(?:)/g;
console.log(str.replace(reg1, '*'));//*q*w*e*r*
console.log(str.replace(reg2, '*'));//*q*w*e*r*
複製代碼

直接寫//g匹配空字符是無效的

找出連接中的文件後綴名

const str = 'https://pic2.zhimg.com/v2-5f03165aa5dff60d75c0f49f0ddd3db3_is.jpg?hhyr';
const reg1 = /(\.[A-z0-9]+$)|(\.[A-z0-9]+(?=\?\w+$))/;
const reg2 = /\.([A-z0-9]+)(\?\w*)?$/;
console.log(str.match(reg1)[0]);//.jpg
console.log(str.match(reg2)[1]);//jpg
複製代碼

13提取Object.prototype.toString.call的類型

let a = new WeakMap();
function getType(o) {
    let str = Object.prototype.toString.call(o);
    let reg = /\b\w+(?=\]$)/;
    return str.match(reg)[0];
}
console.log(getType(a));//WeakMap
複製代碼

經常使用的正則整理

/[1-9]\d*/;//正整數 /-[1-9]\d*/;//負整數 /(-?[1-9]\d*)|0/;整數(正整數、負整數和0)
/[\u4e00-\u9fa5]/;中文字符
複製代碼

其餘的待整理

正則在線測試工具菜鳥工具

參考多是最好的正則表達式的教程筆記了吧...