生活随笔
收集整理的這篇文章主要介紹了
JS正则表达式常见场景下的用法总结
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
(一)前置知識(shí)總結(jié): ?1. 正則表達(dá)式 /xxxx/[ 標(biāo)識(shí) ] 其中的標(biāo)識(shí)含義 ?g (全文查找) ?i (忽略大小寫) ?m (多行查找)
2. 正則表達(dá)式創(chuàng)建的兩種方式(等價(jià),都是對(duì)象) 創(chuàng)建對(duì)象的方式:這種創(chuàng)建方式的好處是可以往正則表達(dá)式中傳入?yún)?shù)~~
let re = new RegExp("a"); // RegExp是一個(gè)對(duì)象,最簡(jiǎn)單的正則表達(dá)式,將匹配字母a?
let re= new RegExp("a", "i"); // 第二個(gè)參數(shù),表示匹配時(shí)不分大小寫?
let re = new RegExp("a", "gi"); // 匹配所有的、忽略大小寫的字符a或A// 往正則表達(dá)式中傳入?yún)?shù),如
let maxLength = 6;
let re = new RegExp(`[\\.][\\d]{0, ${maxLength}}`);
字面量聲明的方式:
let re = /a/gi; // 匹配所有的、忽略大小寫的字符a或A
3. 正則表達(dá)式常見內(nèi)置函數(shù)
test() :被查找的字符串中是否存在模式。exec() :用正則表達(dá)式模式在字符串中運(yùn)行查找,并返回包含該查找結(jié)果的一個(gè)數(shù)組。compile() :把正則表達(dá)式編譯為內(nèi)部格式,從而執(zhí)行得更快。$1...$9 :返回九個(gè)在模式匹配期間找到的、最近保存的部分。只讀。leftContext ($`) :返回被查找的字符串中從字符串開始位置到最后匹配之前的位置之間的字符。只讀。rightContext ($') :返回被搜索的字符串中從最后一個(gè)匹配位置開始到字符串結(jié)尾之間的字符。只讀。lastMatch ($&) :返回任何正則表達(dá)式搜索過程中的最后匹配的字符。只讀。
4. 字符串(或String對(duì)象)一些與正則表達(dá)式相關(guān)的方法
replace () :替換與正則表達(dá)式匹配的子串(注意:js沒有replaceAll方法,不要跟其它語(yǔ)言記混淆了!,替換所有第一個(gè)參數(shù)用正則表達(dá)式控制/exp/g )。split () :把字符串分割為字符串?dāng)?shù)組。match () :返回一個(gè)或多個(gè)匹配的數(shù)組,如果沒有匹配上返回null。match () :返回一個(gè)或多個(gè)匹配的數(shù)組,如果沒有匹配上返回null。 var str =?"baabca_aaef";
str.match(/a/g); // 返回["a", "a", "a", "a", "a"]
str.match(/a/); // 返回["a"],沒有標(biāo)志g則執(zhí)行一次匹配成功即停止
str.match(/aa/g); // 返回["aa", "aa"]
str.match(/A/g); // 返回nullvar str2 = "11 plus 2 equal 13";
str2.match(/\d/g); // 返回["1","1","2","1","3"]
str2.match(/\d+/g); // 返回["11","2","13"] matchAll() :返回RegExpStringIterator迭代器對(duì)象(用于子匹配,但是兼容性不好,在iOS上可能無(wú)效,如果要求兼容的話需要補(bǔ)丁,可以使用該npm包解決兼容性問題https://www.npmjs.com/package/string.prototype.matchall。
var str="11 plus 2 equal 13";
let ite = str.matchAll(/(\d+)/g);
let i0 = ite.next();
let i1 = ite.next();
console.log(io); // 結(jié)果見下圖(左)
console.log(i1); // 結(jié)果見下圖(右) ? ? ? ?
let matchFn = (info) => {let reg = /\{(?<name>[^{}]+)\}/g;// 匹配出所字段let matches = [...info.matchAll(reg)];let matchesKey = [];matches.forEach(item => {let groups = item.groups;matchesKey.push(groups.name);});return matchesKey;
};matchFn('{a}{b}cccozvdkddzhkzd'); // 運(yùn)行結(jié)果為: ["a", "b", "d"] search () :檢索與正則表達(dá)式相匹配的值。
(二)應(yīng)用場(chǎng)景總結(jié): ?1. 取出版本號(hào) 如:"Ubuntu 8",取出數(shù)字8
let osVersion = "Ubuntu 8"; // 其中的8表示系統(tǒng)主版本號(hào)
var re = /^[a-z]+\s+\d+$/i; // +號(hào)表示字符至少要出現(xiàn)1次,\s表示空白字符,\d表示一個(gè)數(shù)字
arr = re.exec(osVersion); // 返回一個(gè)由匹配上的內(nèi)容組成的數(shù)組
console.log(arr[0]); // 因?yàn)檎麄€(gè)字符串剛好匹配re,所以arr[0]等于osVersionre = /\d+/; // 只需要取出數(shù)字
var arr = re.exec(osVersion);
console.log(arr[0]); // 8
如:"Ubuntu 8.10",取出主版本號(hào)8和次版本號(hào)10。(采用正則表達(dá)式的小括號(hào)子匹配的方式)
let osVersion = "Ubuntu 8.10"; // 取出主版本號(hào)和次版本號(hào)
re=/^[a-z]+\s+(\d+)/i; // 用()來(lái)創(chuàng)建子匹配
arr =re.exec(osVersion); // exec返回的數(shù)組第1到n元素中包含的是匹配中出現(xiàn)的任意一個(gè)子匹配
console.log(arr[1]); // 8,第一個(gè)子匹配,事實(shí)也可以這樣取出主版本號(hào)
console.log(arr.length); // 2 re = /^[a-z]+\s+(\d+)\.(\d+)$/i; //.是正則表達(dá)式元字符之一,若要用它的字面意義須轉(zhuǎn)義
arr = re.exec(osVersion);
console.log(arr.length); // 3
console.log(arr[0]); // 完整的osVersion,因?yàn)槿ヅ渖?console.log(arr[1]); // 8,主版本號(hào)
console.log(arr[2]); // 10,次版本號(hào)
2. 提取驗(yàn)證碼 如:"your captcha is :0a4Fd3",取出0
let message = "your captcha is :0a4Fd3";
let re = /:([\d|a-zA-Z]{4,6})$/;
let arr = re.exec(message);
let captcha = arr[1];
console.log(captcha); // 0a4Fd3
3.?替換版本號(hào) 如:"Ubuntu 8.10 ubuntu 9.12",替換為"Ubuntu 新版本號(hào) ubuntu 新版本號(hào)"
let osVersion = "Ubuntu 8.10 ubuntu?9.12";
let re = /([a-z]\s+)(\d+\.\d+)(\s*)/gi;
let result = osVersion.replace(re,"$1新版本號(hào)$3"); // "$1新版本號(hào)$3"為替換的模板
console.log(result); // "Ubuntu 新版本號(hào) ubuntu 新版本號(hào)"
/*
匹配替換過程:1.匹配到"Ubuntu 8.10 "為第1組,此時(shí)re表示"Ubuntu 8.10 ",$1:"Ubuntu "$2:"8.10"$3:" "然后執(zhí)行替換操作:把re表示的字符串內(nèi)容替換為模板表示的內(nèi)容即"Ubuntu 新版本號(hào) ";2.匹配到"ubuntu?9.12"為第2組,此時(shí)re表示"ubuntu?9.12",$1:"ubuntu?"$2:"9.12"$3:""然后執(zhí)行替換操作:把re表示的字符串內(nèi)容替換為模板表示的內(nèi)容即"ubuntu?新版本號(hào)"。
*/
參考來(lái)源:https://www.jb51.net/article/25313.htm
?
?
總結(jié)
以上是生活随笔 為你收集整理的JS正则表达式常见场景下的用法总结 的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔 推薦給好友。