正則表達式(簡單易懂篇)


又到了跳槽高峰期了,想跳槽的小伙伴們一定已經開始做准備工作了吧,我也不例外,哈哈哈!
這里花了幾天復習正則表達式,寫了這篇文章和大家一起回憶回憶這簡單易忘的正則吧。

正則表達式基本語法

一、創建JavaScript正則(RegExp)對象

1. var reg = RegExp('s');
    
2. var reg = /s/;  // 簡寫方式 推薦使用 不能為空 不然會以為是注釋

二、預定義符

開始前先看一些符號表達的意思才好幫助你對下面的例子可以迅速的理解

\s : 空格
\S : 非空格
\d : 數字
\D : 非數字
\w : 字符
\W : 非字符
\i : 不區分大小寫
\g : 全局匹配(一般正則找到第一個符合條件的就會停止,在后面加上這個符合就會告訴正則繼續往下不要停)
| : 或
. : 任意字符
\b : 獨立的部分 ( 起始,結束,空格 )
\B : 非獨立的部分
\n : 重復的某個子項,例如

 var reg = /(a)(b)(c)\1/; //=> abca 重復了a子項

如需使用真正的符號例如“.”,只需添加\即可,如\.

三、常用的幾個方法

1. test() => 在字符串中查找符合正則指定的內容,若找到返回true,否則返回false
    // 用法:正則.test(字符串)
    
var data = '123456789987654321';

var reg = /\d/;      //  \d這里代表數字

if( reg.test(str) ){  

    console.log('內容為數字');
    console.log(reg.test(str)) // 返回 true
    
}
     
2. match() => 在字符串中查詢符合正則指定的內容,成功則返回內容(數組格式),否則返回null
// 用法:字符串.match(正則)

var data = '123456mple789Mple875654';

var reg = /mple/gi;

console.log(data.match(reg)); // mple,Mple

3. search() => 在字符串中查詢符合正則指定的內容,成功找到則返回當前內容的位置從0開始(如不止一個內容符合正則條件,則返回第一個找到的位置),如果沒找到則返回-1

// 用法:字符串.search(正則)

var data = '1234mple56789Mple987mple654321';

var reg = /mple/gi;

console.log(data.search(reg)); // 4

4. replace() => 在字符串中查詢符合正則指定的內容,查找到則替換對應內容並返回替換后的內容

// 用法:字符串.replace(正則,新的字符串/回調函數)

var data = '啦啦啦~一大堆啦啦啦';

var reg = /啦/g;

var rep = data.replace(reg,function(data){
    
    var ne = '';
    
    for(var i=0; i<data.length; i++){
        
        ne += '*';
        
    }
    
    return ne;
    
});

console.log(rep);

5. exec() => 查找並返回當前的匹配結果,以數組的形式返回 
//用法:正則.exec(字符串)

var data = "1234mple5678mple99876mple543Mple21";

var reg = /mple/ig;

var s = reg.exec(data)

console.log(s.index);  //4

6. split() = 正則分割字符串
7. sort():數組中的排序方法,按照ACALL碼進行排序
8. join():數組中的方法,把數組轉換為字符串

var data = '4445554654123156489151321456';

var arr = data.split('');
data = arr.sort().join('');
console.log(data);

四、常用量詞

{n,m} : 至少出現n次,最多m次

{n,} : 至少n次

* : 任意次 相當於{0,}

? :零次或一次 相當於{0,1}

+ : 查找的結果至少出現一次或任意次 {1,}

{n} : 正好n次

最后來個例子理解理解,判斷QQ號

HTML


<input class="qq" type="text" placeholder="請輸入QQ號">
<button type="button" class="sub">檢測</button>

正則


//先來看看我們日常登錄的QQ號有哪些性質

1 首位肯定不是為0 

2 必須是5-10位的數字

var oInput = document.querySelector('.qq');
var oSub = document.querySelector('.sub');
var reg = /^[1-9]\d{4,9}$/;
//為了防止最后幾位數出現字母abc之類的情況,所以需要添加$進行尾數限制
//所以最后的邏輯是這樣的,首位是0-9,接着是4-9位的數字類型。
oSub.onclick = function(){
    if( reg.test(oInput.value) ){
        alert('檢測成功');
    }else{
        alert('賬戶不存在');
    }

};


正則的基本使用就介紹到這了,借鑒了這篇文章也分享給大家,希望大家有所收獲

有公眾號啦!!!歡迎關注,不定期推薦前端技術!!!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM