溫故知新之javascript正則

Backache 發布于2019-08-20 11:30 / 2768人閱讀

摘要：屬性一類是修飾符相關，返回一個布爾值，表示對應的修飾符是否設置返回一個布爾值，指忽略大小寫，注意僅是忽略大小寫，并不忽略全半角，該屬性只讀。

因為沒有系統的總結過正則表達式，工作中用到的也不到，主要靠百度現成的加改改不知道怎么就成功了，決心好好的學習一下正則表達式

新建正則表達式

使用字面量，以斜杠表示開始和結束

var regex = /s+/g;

使用RegExp構造函數

var regex = new RegExp("s+","g");

差別
上面兩種寫法是等價的，都新建了一個正則表達式對象。它們的主要區別是，第一種方法在編譯時新建正則表達式，第二種方法在運行時新建正則表達式。考慮到書寫的便利和直觀，實際應用中，基本上都采用字面量的寫法。

屬性

一類是修飾符相關，返回一個布爾值，表示對應的修飾符是否設置

ignoreCase：返回一個布爾值，指忽略大小寫，注意僅是忽略大小寫，并不忽略全半角，該屬性只讀。
global：返回一個布爾值，進行全局匹配，指匹配到目標串的結尾，該屬性只讀。
multiline：返回一個布爾值，允許多行匹配，該屬性只讀。

m修飾符表示多行模式（multiline），會修改^和$的行為。默認情況下（即不加m修飾符時），^和$匹配字符串的開始處和結尾處，加上m修飾符以后，^和$還會匹配行首和行尾，即^和$會識別換行符（
）。

/world$/.test("hello world
") // false
/world$/m.test("hello world
") // true

上面的代碼中，字符串結尾處有一個換行符。如果不加m修飾符，匹配不成功，因為字符串的結尾不是“world”；加上以后，$可以匹配行尾。

/^b/m.test("a
b") // true

上面代碼要求匹配行首的b，如果不加m修飾符，就相當于b只能處在字符串的開始處。

另一類是與修飾符無關的屬性，主要是下面兩個

lastIndex：返回下一次開始搜索的位置。該屬性可讀寫
source：返回正則表達式的字符串形式（不包括反斜杠），該屬性只讀

正則對象的lastIndex屬性不僅可讀，還可寫。一旦手動設置了lastIndex的值，
就會從指定位置開始匹配。但是，這只在設置了g修飾符的情況下，才會有效。

方法

test()
正則對象的test方法返回一個布爾值，表示當前模式是否能匹配參數字符串

reg.test(str)

如果正則表達式帶有g修飾符，則每一次test方法都從上一次結束的位置開始向后匹配。

var r = /s+/g;
var s = "a b c";

r.lastIndex // 0
r.test(s) // true

r.lastIndex // 2
r.test(s) // true

r.lastIndex // 4
r.test(s) // false

exec()
正則對象的exec方法，可以返回匹配結果。如果發現匹配，就返回一個數組，成員是每一個匹配成功的子字符串，否則返回null。
如果正則表示式包含組匹配，則返回的數組會包括多個成員。第一個成員是整個匹配成功的結果，后面的成員就是圓括號對應的匹配成功的組。也就是說，第二個成員對應第一個括號，第三個成員對應第二個括號，以此類推。整個數組的length屬性等于組匹配的數量再加1
exec方法的返回數組還包含以下兩個屬性：

input：整個原字符串。

index：整個模式匹配成功的開始位置（從0開始計數）。

如果正則表達式加上g修飾符，則可以使用多次exec方法，下一次搜索的位置從上一次匹配成功結束的位置開始。

var r = /a(b+)a/g;

var a1 = r.exec("_abbba_aba_");
a1 // ["abbba", "bbb"]
a1.index // 1
r.lastIndex // 6

var a2 = r.exec("_abbba_aba_");
a2 // ["aba", "b"]
a2.index // 7
r.lastIndex // 10

var a3 = r.exec("_abbba_aba_");
a3 // null
a3.index // TypeError: Cannot read property "index" of null
r.lastIndex // 0

var a4 = r.exec("_abbba_aba_");
a4 // ["abbba", "bbb"]
a4.index // 1
r.lastIndex // 6

當整個字符串到達尾部，正則對象的lastIndex屬性重置為0，意味著以后的匹配將從頭開始

字符串對象的方法

match

字符串對象的match方法對字符串進行正則匹配，返回匹配結果。
如果正則表達式帶有g修飾符，則該方法與正則對象的exec方法行為不同，會一次性返回所有匹配
成功的結果。
設置正則表達式的lastIndex屬性，對match方法無效，匹配總是從字符串的第一個字符開始。

search

字符串對象的search方法，返回第一個滿足條件的匹配結果在整個字符串中的位置。如果沒有
任何匹配，則返回-1。
該方法會忽略g修飾符。設置lastIndex也無效，總是從第一個位置開始

replace
str.replace(search, replacement)

   搜索模式如果不加g修飾符，就替換第一個匹配成功的值，否則替換所有匹配成功的值。

"aaa".replace("a", "b") // "baa"
"aaa".replace(/a/, "b") // "baa"
"aaa".replace(/a/g, "b") // "bbb"

split

字符串對象的split方法按照正則規則分割字符串，返回一個由分割后的各個部分組成的數組。
`str.split(separator, [limit])`
該方法接受兩個參數，第一個參數是分隔規則，第二個參數是返回數組的最大成員數。

貪婪匹配

需要特別指出的是，正則匹配默認是貪婪匹配，也就是匹配盡可能多的字符

var re = /^(d+)(0*)$/;
re.exec("102300"); // ["102300", "102300", ""]

由于d+采用貪婪匹配，直接把后面的0全部匹配了，結果0*只能匹配空字符串了。
必須讓d+采用非貪婪匹配（也就是盡可能少匹配），才能把后面的0匹配出來，如果想將貪婪模式改為非貪婪模式，可以在量詞符后面加一個問號

var re = /^(d+?)(0*)$/;
re.exec("102300"); // ["102300", "1023", "00"]

匹配規則

擴展

切分字符串

"a,b, c  d".split(/[s,]+/); // ["a", "b", "c", "d"]

利用g修飾符允許多次匹配的特點，可以用一個循環完成全部匹配

var r = /a(b+)a/g;
var s = "_abbba_aba_";

while(true) {
  var match = r.exec(s);
  if (!match) break;
  console.log(match);
}link
//["abbba", "bbb"]
//["aba", "b"]

replace的應用
replace方法的一個應用，就是消除字符串首尾兩端的空格。

var a = "  aa  bb  ";

a.replace(/^s+|s+$/g, "")
//"aa  bb"

replace方法的第二個參數可以使用美元符號$，用來指代所替換的內容

"hello world".replace(/(w+)s(w+)/, "$2 $1")
// "world hello"

replace方法的第二個參數還可以是一個函數，將每一個匹配內容替換為函數返回值

參考資料

廖雪峰老師的教程
阮一峰老師的教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80614.html

js溫故而知新5——學習廖雪峰的js教程

摘要：表示行的結束，表示必須以數字結束。用表示的就是要提取的分組。方法在匹配成功后，會返回一個，第一個元素是正則表達式匹配到的整個字符串，后面的字符串表示匹配成功的子串。貪婪匹配需要特別指出的是，正則匹配默認是貪婪匹配，也就是匹配盡可能多的字符。對象 typeof 123; // number typeof NaN; // number typeof str; // string type...

mayaohua 2019-08-21 11:36 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
溫故js系列（5）-正則表達式&常用代碼

摘要：的對象表示正則表達式，而和都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數。對象也提供了個使用正則表達式的方法。如正則表達式將匹配除了和所有大寫字母之外的任何字符。前端學習：教程&開發模塊化/規范化/工程化/優化&工具/調試&值得關注的博客/Git&面試-前端資源匯總歡迎提issues斧正：正則表達式 JavaScript-正則表達式正則表達式簡述正則表達式(re...

glumes 2019-08-21 14:04 評論0 收藏0
深入理解js

摘要：詳解十大常用設計模式力薦深度好文深入理解大設計模式收集各種疑難雜癥的問題集錦關于，工作和學習過程中遇到過許多問題，也解答過許多別人的問題。介紹了的內存管理。延遲加載 (Lazyload) 三種實現方式延遲加載也稱為惰性加載，即在長網頁中延遲加載圖像。用戶滾動到它們之前，視口外的圖像不會加載。本文詳細介紹了三種延遲加載的實現方式。詳解 Javascript十大常用設計模式力薦~ ...

caikeal 2019-08-26 11:39 評論0 收藏0
溫故知新之JS基礎

摘要：訪問屬性是通過操作符完成的，但這要求屬性名必須是一個有效的變量名小紅的屬性名不是一個有效的變量，就需要用括起來。閉包應用封裝私有變量箭頭函數箭頭函數相當于匿名函數，并且簡化了函數定義。數據類型 NAN NaN === NaN; // false 唯一能判斷NaN的方法是通過isNaN()函數： isNaN(NaN); // true 浮點數的相等比較： 1 / 3 === (...

Dr_Noooo 2019-08-20 11:29 評論0 收藏0