您好,登錄后才能下訂單哦!
這篇文章主要介紹“JavaScript正則表達(dá)式怎么使用”,在日常操作中,相信很多人在JavaScript正則表達(dá)式怎么使用問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”JavaScript正則表達(dá)式怎么使用”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
正則表達(dá)式( Regular Expression ) 是用于匹配字符串中字符組合的模式。在js中,正則表達(dá)式也是對象!
正則表達(dá)式通常被用來檢索、替換那些符合某個(gè)模式(規(guī)則)的文本。例如:我們在寫登錄注冊功能的時(shí)候使用的表單驗(yàn)證(對用戶名、密碼進(jìn)行一些字符或長度進(jìn)行限制) ===> (匹配)
正則表達(dá)式還常用于過濾掉頁面內(nèi)容的一些敏感詞匯。例如:我們平常在打游戲時(shí)候的口吐芬芳被換成了***???? ===> (替換)
正則表達(dá)式從字符串中獲取我們想要的特定部分。例如:我們在逛淘寶的時(shí)候在搜索框中搜索內(nèi)容,會(huì)彈出很多與搜索相關(guān)的提示內(nèi)容 ===> (提取) etc…
靈活性、邏輯性和功能性非常的強(qiáng)
可以迅速的用極簡單的方式達(dá)到字符串的復(fù)雜控制
對于剛接觸的人來說,比較晦澀難懂(缺點(diǎn))
在實(shí)際開發(fā)中一般都是拿來主義,直接cv調(diào)用????,但是你得懂,這樣的話你可以進(jìn)行簡單的修改!
在js中可以通過兩種方式創(chuàng)建正則表達(dá)式
利用 RegExp 對象來創(chuàng)建
let regexp = new RegExp(/123/); console.log(regexp); // /123/
利用字面量創(chuàng)建(推薦使用!)
let rg = /123/ console.log(rg); // /123/
雖然在上面我們創(chuàng)建了正則表達(dá)式,但是在實(shí)際使用中,是要匹配正則表達(dá)式的,這里的話就引入了test
test() 是正則對象方法,用于檢測字符串是否符合該規(guī)則,該對象會(huì)返回true或false,其參數(shù)是測試字符串
代碼書寫:regexObj.test(str)
1. regexObj 是我們寫的正則表達(dá)式
2. str 是我們要測試的文本
3. 就是檢測str文本是否符合我們所寫的正則表達(dá)式規(guī)范
let rgp = /123/ console.log(rgp.test(123)); // true
一個(gè)正則表達(dá)式可以由簡單的字符構(gòu)成,比如/abc/
,也可以是簡單和特殊字符的組合,比如/ab*c/
。其中特殊字符也被成為元字符,在正則表達(dá)式中是具有特殊意義的專用字符,如 ^、&、+
等等。
特殊符號鏈接直達(dá) ===> ????正則表達(dá)式mdn????
正則表達(dá)式中的邊界符用來提示
字符所在的位置
,主要有兩個(gè)字符
邊界符 | 說明 |
---|---|
^ | 表示匹配行首的文本(從誰開始) |
$ | 表示匹配行尾的文本(以誰結(jié)束) |
在上方內(nèi)容中講解創(chuàng)建正則表達(dá)式,如果我們僅僅采取/abc/
這種沒有特殊符號的方式,會(huì)發(fā)生一些情況:
let rg = /123/ console.log(rg.test(123)); //true console.log(rg.test(11234)); //true
我們可以發(fā)現(xiàn)當(dāng)我們測試的內(nèi)容只要是符合正則表達(dá)式都會(huì)打印出true
,如果我們想設(shè)置以123開頭的呢?這就需要我們的特殊符號了!
let reg = /^abc/ console.log(reg.test('abc')); //true console.log(reg.test('aabce')); //false console.log(reg.test('aaabcc')); //false
通過以上的方式,我們限制了測試的字符串必須符合以abc
開頭的規(guī)范,所以下方兩行會(huì)返回false
當(dāng)你需要精確匹配的時(shí)候,你可以通過控制開頭和結(jié)尾實(shí)現(xiàn)
let regs = /^abc$/ console.log(regs.test('abc')); //true console.log(regs.test('abcd')); //false
該代碼表示,測試的字符串必須是abc
,其余的都會(huì)打印false
在實(shí)際開發(fā)過程中,我們不可能要匹配一連串的字符,我們需要的功能是我可以隨意去匹配,只要滿足限制就行,字符類就可以解決這個(gè)問題。
字符類:表示有一系列的字符可以選擇,只要匹配其中一個(gè)就可以了 符號:[]
舉例:let rg = /[abc]/
,表示只要測試字符串滿足 包含a 或 包含b 或 包含c 就返回true
我們可以加上特殊字符:let reg = /^[abc]$/
,表示,你的測試字符串只能是a 或者 b 或者c!
如果你想匹配一個(gè)范圍內(nèi)的字符串可以使用特殊符號[-]
舉例 : let reg = /^[A-z]$/
,表示26個(gè)英語字母任何一個(gè)字母(大小寫均可),都會(huì)返回true,但是只能是其中的一個(gè)!
字符組合
我們可以設(shè)置更有靈活性的正則表達(dá)式let rg = /^[A-z0-9_-]$/,表示26個(gè)英語字符、個(gè)位數(shù)字、兩個(gè)符號任意一個(gè)都會(huì)打印true
字符類中的^符號
我們知道^符號在外部表示從誰開始的意思,但是一旦它也出現(xiàn)在字符類[]中,則表示取反的意思!
舉例:let rg = /^[^A-z0-9_-]$/,第一個(gè)^表示從誰開始,第二個(gè)^表示對這個(gè)正則規(guī)范取反操作,如:不能是26個(gè)字母中的任意一個(gè) etc…
量詞符顧名思義就是與數(shù)量有關(guān),這時(shí)你就要想一想它跟字符類的結(jié)合使用咯!量詞符用來設(shè)定某個(gè)模式出現(xiàn)的次數(shù)
量詞說明*重復(fù)零次或多次+重復(fù)一次或更多次?重復(fù)零次或一次{n}重復(fù)n次,n 是一個(gè)正整數(shù),匹配了前面一個(gè)字符剛好出現(xiàn)了 n 次。{n,}重復(fù)n次或更多次,n 是一個(gè)正整數(shù),匹配前一個(gè)字符至少出現(xiàn)了 n 次。{n,m}重復(fù)n到m次,如果 n 或者 m 的值是 0, 這個(gè)值被忽略。
*
的使用
*相當(dāng)于 >=0,可以出現(xiàn)0次或者很多次
let rg = /^a*$/
,表示,a可以出現(xiàn)0次或者多次
let rg = /^a*$/; console.log(rg.test('')); //true console.log(rg.test('a')); //true console.log(rg.test('aaa')); //true
+
的使用
相當(dāng)于 >=1 可以出現(xiàn)一次或多次
let rg = /^a+$/; console.log(rg.test('')); //false console.log(rg.test('a')); //true console.log(rg.test('aaa')); //true
?
的使用
相當(dāng)于1 || 0
let rg = /^a?$/; console.log(rg.test('')); //true console.log(rg.test('a')); //true console.log(rg.test('aaa')); //false
{n}
的使用(重點(diǎn)掌握)
let rg = /^a{3}$/; console.log(rg.test('')); //false console.log(rg.test('a')); //false console.log(rg.test('aaa')); //true
在這里表示字符串a
重復(fù)了三次
{n,}
的使用(重點(diǎn)掌握)
let rg = /^a{3,}$/; console.log(rg.test('')); //false console.log(rg.test('a')); //false console.log(rg.test('aaa')); //true console.log(rg.test('aaaaa')); //true
在這里表示字符串a
必須要重復(fù)三次以及以上,否則打印false
{n,m}
的使用(重點(diǎn)掌握)
let rg = /^a{3,16}$/; console.log(rg.test('')); //false console.log(rg.test('aaa')); //true console.log(rg.test('aaaaaaaaaaaaaaaaaaaaaaaaaaa')); //false
在這里表示字符串a
重復(fù)的區(qū)間是大于等于3 并且 小于等于16
結(jié)合某個(gè)模式應(yīng)用
let reg = /^[A-z0-9_-]{3,16}$/ console.log(reg.test('1018703239')); // true console.log(reg.test('101a24543_q')); //true
這個(gè)正則表達(dá)式其實(shí)就可以用來寫用戶名的表單驗(yàn)證了!
括號總結(jié)
大括號{}
: 是 量詞符 ,表示重復(fù)的次數(shù)
中括號[]
: 是 字符集合, 表示匹配方括號中的任意字符
小括號()
: 表示優(yōu)先級!
預(yù)定義類指的是某些常見模式的簡寫方式。(簡化之前的寫法!)
預(yù)定類 | 說明 |
---|---|
\d | 匹配0-9之前的任意數(shù)字,相當(dāng)于[0-9] |
\D | 匹配一個(gè)非數(shù)字字符。等價(jià)于 [^0-9] |
\w | 匹配一個(gè)單字字符(字母、數(shù)字或者下劃線)。等價(jià)于 [A-Za-z0-9_] |
\W | 匹配一個(gè)非單字字符。等價(jià)于 [^A-Za-z0-9_] |
\s | 匹配空格(包括換行符、制表符、空格符等等) ,相當(dāng)于[\t\r\n\v\f] |
\S | 匹配非空格的字符,相當(dāng)于[^\t\r\n\v\f] |
舉例:
我們在這里做一個(gè)需求,驗(yàn)證座機(jī)號碼,座機(jī)號碼有兩種形式 010-12345678
或者 0530-1234567
.
(注 : 正則表達(dá)式中的或者符號為 : |
)
let reg = /^\d{3}-\d{8}|\d{4}-\d{7}$/ console.log(reg.test('010-12345678')); //true console.log(reg.test('0500-1234567')); //true
1.replace替換
replace()方法可以實(shí)現(xiàn)替換字符串操作,用來替換的參數(shù)可以是一個(gè)字符串也可以是一個(gè)正則表達(dá)式
寫法:stringObj.replace(regexp/substr,replacement)
第一個(gè)參數(shù) : 被替換的字符串或正則表達(dá)式
第二個(gè)參數(shù) : 替換為的字符串
返回值是一個(gè)替換完畢的新字符串
2.正則表達(dá)式參數(shù)
/表達(dá)式/[switch]
switch(也稱為修飾符)按照什么模式來匹配,有三種常用的值:
g : 全局匹配
i : 忽略大小寫
g + i : 全局匹配 + 忽略大小寫
案例:
<body> <textarea cols="30" rows="10" class="one"></textarea> <div class="t"></div> <script> let text = document.querySelector('.one') let ts = document.querySelector('.t') text.onblur = function () { ts.innerHTML = text.value.replace(/星星幣|牛哇/g, '**') } </script>
在這里就可以看到正則整體替換的效果了!
Email地址:^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$
手機(jī)號碼:^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$
國內(nèi)座機(jī)電話號碼(0511-4405222、021-87888822):\d{3}-\d{8}|\d{4}-\d{7}
身份證號(15位、18位數(shù)字),最后一位是校驗(yàn)位,可能為數(shù)字或字符X:(\d{15}$)|(^\d{18}$)|(\d{17}(\d|X|x)$)
帳號是否合法(字母開頭,允許5-16字節(jié),允許字母數(shù)字下劃線):1[a-zA-Z0-9_]{4,15}$
密碼(以字母開頭,長度在6~18之間,只能包含字母、數(shù)字和下劃線):2\w{5,17}$
日期格式:^\d{4}-\d{1,2}-\d{1,2}
騰訊QQ號:[1-9][0-9]{4,} (騰訊QQ號從10000開始)
到此,關(guān)于“JavaScript正則表達(dá)式怎么使用”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。