js正則表達式學習筆記

Towers 發布于2019-08-20 15:28 / 2932人閱讀

摘要：說來慚愧，做前端快三年對于正則表達式的應用還是很淺薄，大家都知道正則的速度基本上是最快的，但就是懶得去記那些語法和規則，這次項目中多次用到了需要匹配替換的動作，終于下定決心去研究一下了。

說來慚愧，做前端快三年對于正則表達式的應用還是很淺薄，大家都知道正則的速度基本上是最快的，但就是懶得去記那些語法和規則，這次項目中多次用到了需要匹配替換的動作，終于下定決心去研究一下了。

實例化正則對象

對象字面量

/pattern/attributes

正則對象由這兩部分構成pattern(匹配規則)+attributes(修飾符)

var reg = /is/

這樣就成功的實例化一個正則表達式對象，接著我們去應用它

字符串的replace函數接受兩個參數，第一個參數可以是字符串或者正則表達式，第二個參數是需要替換的字符串，這樣我們就成功把小寫的’is‘替換成了大寫的’IS‘
好多同學看那一串符號又開始頭暈了，別急，聽我慢慢道來

我們先來拆解這個正則表達式
首先開頭結尾的//是必須的，然后是兩個’b‘，代表著單詞的開頭或結尾,也就是單詞的分界處，最后中間的is是需要匹配的字符串。連起來意思就是匹配字符串中的is，并且前后必須要有分界，也就是說’isisisisis‘這里的is不能替換成’ISISISISIS‘
好了，有同學會問，為什么句子中的第二個’is‘沒有被替換，為什么我們沒看到所謂的那個修飾符。我們再改寫一下這個正則對象

發現多了一個修飾符g，代表全局（globle）搜索，這樣就可以匹配字符串中的所有的’is‘

構造函數

var reg = new RegExp(pattern,attributes)

var reg = new RegExp("is","g") === var reg = /is/g

這里需要解釋下為什么同樣的匹配規則卻多了兩個
那是因為在js語法中，需要轉義，所以在這里的構造函數參數中需要把轉義

修飾符

g--globe

這個在之前的例子中大家已經見識過了，就是全局搜索，默認匹配到第一個就會停止

i--ignore case

忽略大小寫，默認大小寫敏感

m--multiple lines

多行搜索

各種規則

元字符

正則表達式有兩種基本字符類型組成--原義文本字符和元字符
原義文本字符：字母數字這種無需轉義的字符
元字符：在正則表達式中有特殊含義的非字母字符

 * + ? $ ^ . |  () {} []

字符類

我們可以用元字符[]來構造簡單的類
比如說：[abc]就把abc三個字母歸為了一類，表達式可以匹配這一類字符

字符類取反

使用元字符^表示不屬于創建的類中的字符

范圍類

如果要是利用字符類匹配26個英文字母難道要一一寫出來么，哈哈哈，too young too simple
使用范圍類[a-z]匹配所有的26個英文字母，相加匹配條件就直接加在[]里面。
比如說[a-zA-Z0-9]匹配大小寫的英文字母和0-9的數字

預定義類

看一個例子：匹配ab+數字+任意字符的字符串

在學習預定義類之前我們的寫法是

ab[0-9][^/n/r]

現在我們學習了預定義類之后就可以這樣

abd.

邊界

這里的單詞邊界在最早的例子中我們已經見識過了，現在我們對比一下b和B的區別

^和$的用法

需要注意的是^和$在正則中的位置

量詞

如果我們需要匹配連續出現100次數字的字符串難道要寫100個吧
偉大的js語言當然不會這么傻了，這不引入了量詞的概念么

這一次的例子我們結合接下來的概念一起理解

貪婪模式與非貪婪模式

這個例子中我們把0-9這九個數字先是用{3，6}來全局匹配，發現匹配出兩個NB
我來解釋一下，正則表達式默認是貪婪模式匹配，即在量詞范圍中取最大的那個來匹配，所以第一個才會出現兩個NB，1-6匹配一個NB,7-9匹配一個NB。而第二個匹配范圍是{3，7}，結果是NB89，因為最大值是7，所以1-7匹配成NB，而剩下的8，9達不到3個，所以沒有匹配成功

這個非貪婪模式和貪婪模式相反，即取最小值來匹配，用法是在量詞后面加？。
正確設置匹配模式對于處理復雜的正則是很有益處的

分組

現在有這樣的需求，匹配wensnb這個字符串出現三次，是不是有的同學會說

wensnb{3}

這樣當然是錯啦，因為只會匹配b出現三次，這時候就需要分組的概念

()可以起到分組的效果

或

用 | 表示或，下面的例子展示或在分組中的應用

（）把nb和123分組，并且用|表示兩者取其一

反向引用

利用$進行分組中的引用，分別把分組中的內容對應$1....$n

忽略引用

并不是所有的分組我們都希望引用，用?:來忽略引用

我們把上個例子中的第二個引用忽略，所以引用個數由3變成2個，因此找不到$3
原來對應$3的24現在變成了$2，而$1不變

前瞻

大家聽這個名字前瞻就知道一定有一個后顧和他對應，說的沒錯，只不過在js語法中的正則不支持后顧，所以我們只關注前瞻就夠了

我們先來定義“前”：

在正則表達式中匹配是由文本頭部到尾部（左到右），所以這個“前”代表的是文本的尾部

下面來定義前瞻：

正則表達式匹配到規則時再向前檢查是否符合斷言或者不符合斷言（也是正則）

正向和負向前瞻的區別就是匹配到正則之后是否符合斷言，符合斷言稱為正向前瞻，不符合就是負向前瞻

下面來看一個例子

在這個正向前瞻中，匹配一個單詞字符（w不僅代表單詞，還代表數字下劃線）并且前面的還要符合數字1-3這個斷言才行，因此我們把w e n這三個字符匹配到了

正則表達式的屬性和方法

屬性

在文章的開始我們介紹了修飾符globle,ignoreCase,multilines
其實這個都是正則表達式的屬性，并且有兩個我們沒有說lastIndex和source
這五個屬性都是只讀，不能修改

方法

RegExp.prototype.test(str) //匹配傳入的字符串符不符合正則規則（true or false）

RegExp.prototype.exec(str)

云服務器 GPU云服務器座機正則表達式 js js域名正則表達式 js類型正則表達式 js網址正則表達式

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

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

js正則表達式學習筆記

摘要：分組小括號功能較多有三種功能，作用一，把單獨的項組合成子表達式。作用三，允許后面引用前面的表達式。如果這時的正則表達式是一個非全局的，那么和正則表達式方法拿到的結果相同。，也可以接受一個正則表達式作為參數。正則表達式創建字面量創建，a = /abc/gim;構造函數創建，a = new RegExp(abc,gim)正則表達式中的特殊字符，[...] 方括號中的任意字符[^...] ...

superPershing 2019-08-23 12:48 評論0 收藏0
JS正則表達式學習筆記2

摘要：第二階段該部分內容是學習正則的第二篇內容，點擊第一部分查看第一部分的內容。第二階段該部分內容是學習正則的第二篇內容，點擊第一部分查看第一部分的內容。這部分學習的內容包括：分組斷言匹配模式（貪婪和懶惰）分組我們可以通過量詞匹配一個字符多次，但是如果我們想要匹配多個字符多次，就需要用到分組，比如下面一個例子 // 匹配字母和數字連續出現三次的字符 let str = a...

Ajian 2019-08-26 10:12 評論0 收藏0
正則表達式

摘要：本文內容共正則表達式火拼系列正則表達式回溯法原理學習正則表達式，是需要懂點兒匹配原理的。正則表達式迷你書問世了讓幫你生成和解析參數字符串最全正則表達式總結驗證號手機號中文郵編身份證地址等是正則表達式的縮寫，作用是對字符串執行模式匹配。 JS 的正則表達式正則表達式一種幾乎可以在所有的程序設計語言里和所有的計算機平臺上使用的文字處理工具。它可以用來查找特定的信息（搜索），也可以用來查...

bang590 2019-08-22 13:59 評論0 收藏0
JS正則表達式學習筆記1

摘要：正則表達式作為前端學習的一個知識點，是每個合格的前端開發都應該掌握它的用法。元字符一般情況下，正則表達式的一個字符對應字符串的一個字符。正則表達式作為前端學習的一個知識點，是每個合格的前端開發都應該掌握它的用法。正則表達式的學習確實不難，語法和應用也非常簡單，能夠快速入門，很輕松的就能寫出簡單的表達式來對字符串執行某些操作。網上也有標題黨說一杯咖啡的時間就能學會。能學會嗎？能！但要真...

wangdai 2019-08-26 10:12 評論0 收藏0