摘要:返回值一個新的對象,具有指定的模式和標志。參數作用正則表達式規定匹配的類型。如果未找到匹配,則返回值為。返回值請注意,無論是否是全局模式,都會把完整的細節添加到它返回的數組中。字符串或正則表達式,從該參數指定的地方分割。
前言
PS:2018/03/27 優化文章格式,新增部分測試代碼
說起正則其實大家都會經常接觸到,前端小到校驗,大到插件隨處可見,簡單的方法也能實現需求,不過缺乏靈活性,一旦需要復雜化,沒有什么比正則更加合適的技術了。這也算是程序員的一道檻了。
以下資料截圖都來源于JavaScript RegExp 對象
表示正則表達式,它是對字符串執行模式匹配的強大工具。
參數 | 作用 |
---|---|
pattern | 字符串,指定了正則表達式的模式或其他正則表達式。 |
attributes | 修飾符。ECMAScript 標準化之前,不支持 m 屬性。如果 pattern 是正則表達式,而不是字符串,則必須省略該參數。 |
返回值:
一個新的 RegExp 對象,具有指定的模式和標志。如果參數 pattern 是正則表達式而不是字符串,那么 RegExp() 構造函數將用與指定的 RegExp 相同的模式和標志創建一個新的 RegExp 對象。
如果不用 new 運算符,而將 RegExp() 作為函數調用,那么它的行為與用 new 運算符調用時一樣,只是當 pattern 是正則表達式時,它只返回 pattern,而不再創建一個新的 RegExp 對象。
拋出:
SyntaxError - 如果 pattern 不是合法的正則表達式,或 attributes 含有 "g"、"i" 和 "m" 之外的字符,拋出該異常。
TypeError - 如果 pattern 是 RegExp 對象,但沒有省略 attributes 參數,拋出該異常。
用于在腳本執行過程中編譯正則表達式,也可用于改變和重新編譯正則表達式(將正則表達式編譯為內部格式,從而更快地執行)。
參數 | 作用 |
---|---|
regexp | 正則表達式 |
modifier | 規定匹配的類型。"g" 用于全局匹配,"i" 用于區分大小寫,"gi" 用于全局區分大小寫的匹配。 |
實際上compile就是個修改編譯作用,不能直接用于匹配正則
var str1 = "Hello World", str2 = "Hello World", patt = /man/g; //正常正則 console.time(); str1 = str1.replace(patt, "person"); console.timeEnd(); //編譯后的正則 console.time(); patt.compile(patt); str2 = str2.replace(patt, "person"); console.timeEnd(); // default: 2.818ms // default: 0.096ms
性能提升還是挺明顯的
RegExpObject.exec(string)用于檢索字符串中的正則表達式的匹配。
參數 | 作用 |
---|---|
string | 必需。要檢索的字符串。 |
返回值: 返回一個數組,其中存放匹配的結果。如果未找到匹配,則返回值為 null。
說明: 調用 RegExp 對象 r 的 test() 方法,并為它傳遞字符串 s,與這個表示式是等價的:r.exec(s) != null ---> r.test(s)。
重要事項: 如果在一個字符串中完成了一次模式匹配之后要開始檢索新的字符串,就必須手動地把 lastIndex 屬性重置為 0。
返回值: 請注意,無論 RegExpObject 是否是全局模式,exec() 都會把完整的細節添加到它返回的數組中。這就是 exec() 與 match() 的不同之處,后者在全局模式下返回的信息要少得多。因此我們可以這么說,在循環中反復地調用 exec() 方法是唯一一種獲得全局模式的完整模式匹配信息的方法。
var str = "Every man in the world! Every woman on earth!", patt = /man/g, result; while ((result = patt.exec(str)) != null) { console.log(result); console.log(patt.lastIndex); } // [ "man", // index: 6, // input: "Every man in the world! Every woman on earth!", // groups: undefined ] // 9 // [ "man", // index: 32, // input: "Every man in the world! Every woman on earth!", // groups: undefined ] // 35
index 屬性聲明的是匹配文本的位置。input 屬性則存放的是被檢索的字符串 string。
用于檢測一個字符串是否匹配某個模式.
參數 | 作用 |
---|---|
string | 必需。要檢索的字符串。 |
返回值: 如果字符串 string 中含有與 RegExpObject 匹配的文本,則返回 true,否則返回 false。
說明: 調用 RegExp 對象 r 的 test() 方法,并為它傳遞字符串 s,與這個表示式是等價的:r.exec(s) != null ---> r.test(s)。
var str = "Every man in the world! Every woman on earth!", patt = /man/g; console.log(patt.test(str)); // true支持正則表達式的 String 對象方法 stringObject.search(regexp)
用于檢索字符串中指定的子字符串,或檢索與正則表達式相匹配的子字符串。
參數 | 作用 |
---|---|
regexp | 該參數可以是需要在 stringObject 中檢索的子串,也可以是需要檢索的 RegExp 對象。 |
返回值: stringObject 中第一個與 regexp 相匹配的子串的起始位置,如果沒有找到任何匹配的子串,則返回 -1。
說明: search() 方法不執行全局匹配,它將忽略標志 g。它同時忽略 regexp 的 lastIndex 屬性,并且總是從字符串的開始進行檢索,這意味著它總是返回 stringObject 的第一個匹配的位置。
var str = "How Are you doing today?How Are you doing today?" console.log(str.search(/are/gi)); // 4stringObject.match(searchvalue/regexp)
可在字符串內檢索指定的值,或找到一個或多個正則表達式的匹配。
參數 | 作用 |
---|---|
searchvalue | 必需。規定要檢索的字符串值。 |
regexp | 必需。規定要匹配的模式的 RegExp 對象。如果該參數不是 RegExp 對象,則需要首先把它傳遞給 RegExp 構造函數,將其轉換為 RegExp 對象。 |
返回值: 存放匹配結果的數組。該數組的內容依賴于 regexp 是否具有全局標志 g。
說明: match() 方法將檢索字符串 stringObject,以找到一個或多個與 regexp 匹配的文本。這個方法的行為在很大程度上有賴于 regexp 是否具有標志 g。
如果 regexp 沒有標志 g,那么 match() 方法就只能在 stringObject 中執行一次匹配。如果沒有找到任何匹配的文本, match() 將返回 null。否則,它將返回一個數組,其中存放了與它找到的匹配文本有關的信息。該數組的第 0 個元素存放的是匹配文本,而其余的元素存放的是與正則表達式的子表達式匹配的文本。除了這些常規的數組元素之外,返回的數組還含有兩個對象屬性。index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置,input 屬性聲明的是對 stringObject 的引用。
如果 regexp 具有標志 g,則 match() 方法將執行全局檢索,找到 stringObject 中的所有匹配子字符串。若沒有找到任何匹配的子串,則返回 null。如果找到了一個或多個匹配子串,則返回一個數組。不過全局匹配返回的數組的內容與前者大不相同,它的數組元素中存放的是 stringObject 中所有的匹配子串,而且也沒有 index 屬性或 input 屬性。
注意: 在全局檢索模式下,match() 即不提供與子表達式匹配的文本的信息,也不聲明每個匹配子串的位置。如果您需要這些全局檢索的信息,可以使用 RegExp.exec()。
var str = "How are you doing today?How are you doing today?" console.log(str.match(/ a/)); console.log(str.match(/a.e/g)); // [ " a", // index: 3, // input: "How are you doing today?How are you doing today?", // groups: undefined ] // [ "are", "are" ]stringObject.replace(regexp/substr,replacement)
用于在字符串中用一些字符替換另一些字符,或替換一個與正則表達式匹配的子串。
參數 | 作用 |
---|---|
regexp/substr | 必需。規定子字符串或要替換的模式的 RegExp 對象。請注意,如果該值是一個字符串,則將它作為要檢索的直接量文本模式,而不是首先被轉換為 RegExp 對象。 |
replacement | 必需。一個字符串值。規定了替換文本或生成替換文本的函數。 |
返回值: 一個新的字符串,是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。
var str = "How are you doing today?" console.log(str.replace(/ /g, "|")); console.log(str.replace(/ /g, function () { return "-----" })); console.log(str.replace(/a.e/g, "were")); // How|are|you|doing|today? // How-----are-----you-----doing-----today? // How were you doing today?stringObject.split(separator,howmany)
用于把一個字符串分割成字符串數組。
參數 | 作用 |
---|---|
separator | 必需。字符串或正則表達式,從該參數指定的地方分割 stringObject。 |
howmany | 可選。該參數可指定返回的數組的最大長度。如果設置了該參數,返回的子串不會多于這個參數指定的數組。如果沒有設置該參數,整個字符串都會被分割,不考慮它的長度。 |
返回值: 一個字符串數組。該數組是通過在 separator 指定的邊界處將字符串 stringObject 分割成子串創建的。返回的數組中的字串不包括 separator 自身。
但是,如果 separator 是包含子表達式的正則表達式,那么返回的數組中包括與這些子表達式匹配的字串(但不包括與整個正則表達式匹配的文本)。
var str = "How are you doing today?" console.log(str.split(" ", 3)); console.log(str.split(" ")); console.log(str.split("are")); // [ "How", "are", "you" ] // [ "How", "are", "you", "doing", "today?" ] // [ "How ", " you doing today?" ]方括號用于查找某個范圍內的字符:
var str = "abcdaabc164984616464646464AAWEGAWGAG"; console.log(str.match(/[a-f]/g).join("")); console.log(str.match(/[A-F]/g).join("")); console.log(str.match(/[A-z]/g).join("")); console.log(str.match(/[0-9]/g).join("")); console.log(str.match(/[adgk]/g).join("")); console.log(str.match(/[^a-z]/g).join("")); console.log(str.match(/(r|b|g)/g).join("")); // abcdaabc // AAEAA // abcdaabcAAWEGAWGAG // 164984616464646464 // adaa // 164984616464646464AAWEGAWGAG // bb元字符(Metacharacter)是擁有特殊含義的字符:
首先看看通用并且簡單的幾個元字符.
var str = "Every man in the world! 1, 2, 3, Let"s go!!"; console.log(str.match(/m.n/g).join("")); console.log(str.match(/w/g).join("")); console.log(str.match(/W/g).join("")); console.log(str.match(/d/g).join("")); console.log(str.match(/D/g).join("")); console.log(str.match(/s/g).join("")); console.log(str.match(/S/g).join("")); // man // Everymanintheworld123Letsgo // ! , , , " !! // 123 // Every man in the world! , , , Let"s go!! // Everymanintheworld!1,2,3,Let"sgo!!
b 和 B元字符匹配單詞邊界與否意思是在單詞邊界匹配的位置,單詞字符后面或前面不與另一個單詞字符直接相鄰。請注意,匹配的單詞邊界并不包含在匹配中。換句話說,匹配的單詞邊界的長度為零。(不要與 [b] 混淆。)
var str = "If you love yourself, you can jump into your life from a springboard of self-confidence. If you love yourself, you can say what you want to say, go where you want to go."; console.log(str.match(/your/));//->里面的your console.log(str.match(/yourB/));//->里面的yourself,yourself // [ "your", // index: 40, // input: "If you love yourself, you can jump into your life from a springboard of self-confidence. If you love yourself, you can say what you want to say, go where you want to go.", // groups: undefined ] // [ "your", // index: 12, // input: "If you love yourself, you can jump into your life from a springboard of self-confidence. If you love yourself, you can say what you want to say, go where you want to go.", // groups: undefined ]
進制數我沒用,不太了解,下面都是指W
var str = "If you love yourself, you can jump into your life from a springboard of self-confidence. If you love yourself, you can say what you want to say, go where you want to go."; console.log(str.match(/127/gi));//以八進制數 xxx 規定的字符。 console.log(str.match(/x57/gi));//以十六進制數 dd 規定的字符 console.log(str.match(/u0057/gi));//以十六進制數 xxxx 規定的 Unicode 字符。
其他就字面意思,不解釋了.
量詞var str = "n, On, Oon, Ooon"; console.log(str.match(/o+n/gi)); console.log(str.match(/o*n/gi)); console.log(str.match(/o?n/gi)); console.log(str.match(/o{1}n/gi)); console.log(str.match(/o{1,2}n/gi)); console.log(str.match(/o{3,}n/gi)); console.log(str.match(/^n/gi)); console.log(str.match(/on$/gi)); console.log(str.match(/O(?=on)/)); console.log(str.match(/O(?!on)/)); // [ "On", "Oon", "Ooon" ] // [ "n", "On", "Oon", "Ooon" ] // [ "n", "On", "on", "on" ] // [ "On", "on", "on" ] // [ "On", "Oon", "oon" ] // [ "Ooon" ] // [ "n" ] // [ "on" ] // [ "O", index: 7, input: "n, On, Oon, Ooon", groups: undefined ] // [ "O", index: 3, input: "n, On, Oon, Ooon", groups: undefined ]捕獲
參數 | 作用 |
---|---|
(n) | 匹配n,并捕獲文本到自動命名的組里 |
(?:n) | 匹配 n但不獲取匹配結果,也就是說這是一個非獲取匹配,不進行存儲供以后使用。 |
正則表達式一個最重要的特性就是將匹配成功的模式的某部分進行存儲供以后使用這一能力。 對一個正則表達式模式或部分模式兩邊添加圓括號()可以把這部分表達式存儲到一個臨時緩沖區中。所捕獲的每個子匹配都按照在正則表達式模式中從左至右所遇到的內容按順序存儲。 存儲子匹配的緩沖區編號從1開始,連續編號至最大99個子表達式。 每個緩沖區都可以使用"n"(或用"$n")訪問,其中n為1至99的阿拉伯數字,用來按順序標識特定緩沖區(子表達式)。
var str = "I am the best of the best in the best place"; console.log(str.match(/(the best).*1/g)) //["the best of the best in the best"]
注意的是它只能匹配重復的規則
var str = "aa bb ab"; console.log(str.match(/(w)1/g))//["aa", "bb"] console.log(str.match(/(?:w)1/g))//null
意思前面匹配到a后面只能也是a,哪怕它定制的規則的所有單詞
下面是或的簡短寫法
var str = "better best"; console.log(str.match(/(better|best)/g)); console.log(str.match(/be(?:tter|st)/g));貪婪與懶惰模式
貪婪模式,它會盡可能匹配多的字符
懶惰模式,它會盡可能匹配少的字符
寫法區別就是貪婪模式后面加上?就變成懶惰模式了
var str = "123
abc
"; console.log(str.match(/S*
/)); // ["123
abc
", index: 0, input: "123
abc
"] console.log(str.match(/S*?
/)); // ["123
", index: 0, input: "123
abc
"]
正則匹配還有很多強大的功能位,只講到這里一半是因為水平有限,平常用到也就這些.另一半是在javascript里支持的功能也是有限,現階段講了也用不到就算了,
---------------------------------------------------實戰篇-----------------------------------------------------------------------------
現在開始來寫正題了.先寫個簡單的日期匹配練手,最基礎的數字匹配
var str = "2017.04.10 2017-4-10 2017/04/1"; //基礎寫法 console.log(str.match(/[0-9]{4}(.|-|/)[0-9]{1,2}(.|-|/)[0-9]{1,2}/g)); //元字符寫法 console.log(str.match(/d{4}.d{1,2}.d{1,2}/g)); //量詞寫法 console.log(str.match(/d{4}(.d+){2}/g)); // [ "2017.04.10", "2017-4-10", "2017/04/1" ] // [ "2017.04.10", "2017-4-10", "2017/04/1" ] // [ "2017.04.10", "2017-4-10", "2017/04/1" ]
常見的支付金額校驗,純數字大于0最多兩個小數
var reg = /^(0|[1-9]d*)?(.d{1,2})?$/g; console.log("023".match(reg)); console.log(".5".match(reg)); console.log("255".match(reg)); console.log("255.1".match(reg)); console.log("255.31".match(reg)); console.log("255.313".match(reg)); // null // [ ".5" ] // [ "255" ] // [ "255.1" ] // [ "255.31" ] // null
這個有點復雜,折騰很久,在網上找到好多的答案其實都是錯漏百出的,例如
/^d*.?d{0,2}$/: 它能匹配012這種不正常格式
/(^1-9?(.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9].0-9?$)/: 這種不用細看都知道不是合適答案,也就相當于分拆出每個可能,發揮不出正則的優勢,我都沒往下看了
逐步分析一下我自己寫的:
[1-9]d*:開頭衹能1-9,后面可不帶或帶多個數字
^(0|[1-9]d*)?: 或者0開頭,也能省略開頭
(.d{1,2})?$: 兩個小數可要可不要
之前還遇到一個面試題是替換字符串內的變量,如下
var str = "Hello ${name},you are so ${praise}", obj = { name: "高圓圓", praise: "goodly" }; console.log(str.replace(/${([^{}]+)}/g, function (match, key) { return obj[key] })) // Hello 高圓圓,you are so goodly
---------------------------------------------------尾聲-----------------------------------------------------------------------------
其實應該還有很多東西可以說,但是目前先熟悉掌握這些就夠了,過段時間我有時間再繼續寫些進階知識
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/106246.html
摘要:如果遇到非常的復雜的匹配,正則表達式的優勢就更加明顯了。關于正則表達式書寫規則,可查看,上面說的很清楚了,我就不貼出來了。替換與正則表達式匹配的子串,并返回替換后的字符串。結語正則表達式并不難,懂了其中的套路之后,一切都變得簡單了。 前言 在正文開始前,先說說正則表達式是什么,為什么要用正則表達式?正則表達式在我個人看來就是一個瀏覽器可以識別的規則,有了這個規則,瀏覽器就可以幫我們判斷...
摘要:前言正則表達式時處理字符串中常用的手法,本文以簡單的方式,快速展示了中正則相關的基礎知識點。文末還提供了幾個簡單的正則相關面試題。接下來是正則部分,注意后面的并不匹配,也就是比如,實際匹配的值是和,在和后面加上,就完成了預期。 前言:正則表達式時處理字符串中常用的手法,本文以簡單的方式,快速展示了JavaScript中正則相關的基礎知識點。文末還提供了幾個簡單的正則相關面試題。個人總結...
摘要:正則表達式基礎入門字符類,如為匹配任何字符組成的字符重復如為匹配一到三個單詞選擇分組和引用指定匹配位置修飾符直接量字符可用于模式匹配的方法對象基本要素字符類方括號內的任意字符不在方括號內的任意字符除換行符和其他行終止符之外的任意字符任何字 JavaScript正則表達式-基礎入門 字符類,如 /w/ 為匹配任何ASCII字符組成的字符 重復, 如 /w{1,3}/ 為匹配一到三個單詞...
摘要:寫一個正則表達式來測試變量中是否包含字符串。用函數給出不使用字符,但和等價的正則表達式。第十四課標志全局匹配標志第二個常用的標志是全局匹配標志,用字母表示。寫出一個正則表達式來檢驗合法性。非捕獲組的主要用途是給一個組賦予量詞。 TRY REGEX 是一個交互式的正則表達式學習項目項目地址:https://github.com/callumacra...在線地址:http://tryre...
閱讀 3715·2023-04-26 00:56
閱讀 2695·2021-09-30 10:01
閱讀 971·2021-09-22 15:30
閱讀 3929·2021-09-07 10:21
閱讀 1535·2021-09-02 15:40
閱讀 2769·2021-08-30 09:47
閱讀 1253·2021-08-16 10:57
閱讀 1874·2019-08-30 14:01