正則表達式概述

1.定義

正則表達式（Regular Expression）是用于匹配字符串中字符組合的模式。在js中，正則表達式也是對象

通常被用來檢索、替換那些符合某個模式（規則）的文本，列入驗證表單，替換敏感詞，從字符串中獲取我們想要的特定部分。

2.特點

靈活性、邏輯性和功能性非常的強

可以迅速地用極簡單的方式達到字符串的復雜控制

對于剛接觸的人來說，比較復雜難懂

實際開發，一般都是直接復制寫好的正則表達式，但是要求會使用正則表達式并且根據實際情況修改正則表達式。

正則表達式在js中的使用

創建正則表達式

1.利用調用RegExp對象來創建?正則表達式

var regexp = new RegExp(/123/); console.log(regexp);

2.利用字面量創建 正則表達式

var rg = /123/

測試正則表達式test

test() 該對象會返回true和false

regexObj.test(str)

?regexObj是寫的正則表達式

str是我們要測試的文本

就是檢測str文本是否符合我們寫的正則表達式規范

var rg = /123/ console.log(rg.test(123));

正則表達式中的特殊字符

邊界符

正則表達式中的邊界符（位置符）用來提示字符所處的位置，主要有兩個字符

邊界符	說明
^	表示匹配行首的文本（以誰開始）
$	表示匹配行尾的文本（以誰結束）

var rg = /abc/; //正則表達式里面不需要加引號 不管是數字型還是字符串型// /abc/只要包含abc這個字符串都返回true console.log(rg.test('abc')); //返回true console.log(rg.test('abcd')); //返回true console.log(rg.test('abcd')); //返回truevar reg=/^abc/; //要求以abc開頭 console.log(rg.test('abc')); //返回true console.log(rg.test('abcd')); //返回true console.log(rg.test('abcd')); //返回falsevar reg1=/^abc&/; //精確匹配abc console.log(rg.test('abc')); //返回true console.log(rg.test('abcd')); //返回false console.log(rg.test('abcd')); //返回false console.log(rg.test('abcabc')); //返回false

字符類

[? ]表示有一系列字符可供選擇，只要匹配其中一個就可以了

var rg = /[abc]/; //只要包含a或者b或者c都返回true console.log(rg.test('andy')); //返回truevar rg = /^[abc]$/; //三選一 只有a或b或c時才會true console.log(rg.test('aa')); //返回false console.log(rg.test('a')); //返回true console.log(rg.test('b')); //返回true console.log(rg.test('c')); //返回true console.log(rg.test('abc')); //返回false

[ - ]表示方括號內部?范圍符-

var rg = /^[a-z]$/; //26個英文字母任何一個都會返回true console.log(rg.test('a')); //返回true console.log(rg.test('1')); //返回false console.log(rg.test('A')); //返回false

字符組合

var rg = /^[a-zA-Z0-9_-]$/; //26個英文字母（大小寫都可以）0-9 _ -任何一個都會返回true

?[ ^ ]如果中括號里面有^表示取反的意思?別和邊界符^別混淆

var rg = /^[^a-zA-Z0-9_-]$/;

量詞符

量詞符用來設定某個模式出現的次數

量詞	說明
*	重復0次或更多次? ?>=0
+	重復一次或更多次? >=1
?	重復0次或一次? ? ? 1或0
{n}	重復n次? ? ?
{n,}	重復n次或更多次? ?大于等于n次
{n,m}	重復n-m次? ?大于等于n，并且小于等于m

要把量詞符放到字符后面

注意{6,16}之間不要有空格

var rg = /^[^a-zA-Z0-9_-]{6,16}$/;

案例：用戶名驗證

功能需求：

1.如果用戶名輸入合法，則后面提示信息為：用戶名合法，并且顏色為綠色

2.如果用戶名輸入不合法，則后面提示信息為：用戶名不合法，并且顏色為紅色

<style> span{color:#aaa;font-size:14px; } .right{color:green; }.wrong{color:red; }</style> <input type="text" class="uname"> <span>請輸入用戶名</span><script>var reg = /^[a-zA-Z0-9_-]{6,16}$/; var uname = document.querySelector('.uname');var span = document.querySelector('span');uname.onblur = function(){if(reg.test(this.value)){console.log(); span.className = 'right';span.innerHTML = '用戶名輸入正確';}else{ console.log();span.className = 'wrong';span.innerHTML = '用戶名輸入錯誤';} }</script>

括號總結

中括號?字符集合?匹配方括號中的任意字符

大括號? 量詞符?表示重復的次數

var reg =/^abc{3}$/; //它只讓c重復3次

小括號? 表示優先級

var reg =/^(abc){3}$/; //它讓abc重復3次

?預定義類

?指某些常見模式的簡寫方式

預定類	說明
\d	匹配0-9之間的任一數字，相當于[0-9]
\D	匹配0-9以外的字符，相當于[^0-9]
\w	匹配任意字母、數字和下劃線，相當于[A-Za-z0-9_]
\W	除所有字母、數字和下劃線以外的字符，相當于[^A-Za-z0-9_]
\s	匹配空格（包括換漢符、制表符、空格符等），相當于[\t\r\n\v\f]
\S	匹配非空格的字符，相當于[^\t\r\n\v\f]

正則表達式中的替換

?replace替換

stringObject.replace(regexp/substr,replacement)

第一個參數：被替換的字符串或者?正則表達式

第二個參數：替換為的字符串

返回值是一個替換完畢的新字符串

?

<textarea name="" id="message" ></textarea> <button>提交</button> <div></div> <script>var text = document.querySelector('textarea');var btn = document.querySelector('button');var div= document.querySelector('div');btn.onclick = function(){div.innerHTML=text.value.replace(/激情/g,'**'); //g為全局匹配}</script>

?/表達式/[switch]? ? ?switch（修飾符）按照什么樣的模式來匹配，有三種值

g:全局匹配

i：忽略大小寫

gi：全局匹配+忽略大小寫

總結

以上是生活随笔為你收集整理的js高级-正则表达式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。