十一、JavaScript正則表達式

一、什么是正則表達式（Regular Expression)

正則表達式是對字符串操作的一種邏輯公式，就是用事先定義好的一些特定字符、及這些特定字符的組合，組成一個“規則字符串”，這個“規則字符串”用來表達對字符串的一種過濾邏輯( 即用這種方法來匹配想要的東西）。

二、正則表達式對象的創建

reg創建正則表達式對象，以雙斜線括起來；
test() 方法查找字符串中的指定值。返回值是 true 或 false。
exec() 方法查找字符串中的指定值。返回值是一個由指定值、指定值的下標和指定值所在的字符串組成的數組，如果沒有發現匹配，則返回 null。

        //創建正則表達式對象
        var reg = /lize/i; //i不區分大小寫
        
        //使用reg判斷字符串是否符合規則
        
        var res = reg.test("i am lize");
        console.log(res);


        var res2 = reg.exec('i am lize');
        console.log(res2);
        console.log(res2.index);  //獲取下標

以上代碼在控制臺打印的效果如下：


95E2F147-7A67-44AC-AD01-F9FE2B3379B9.png

三、字符串的方法

search(/haha/) 根據正則表達式進行查找。參數是正則表達式，返回值為元素的下標。
replace(/haha/,"hehe") 根據正則表達式進行查找替換。第一個參數是我們需要替換掉的內容，第二個參數就是我們替換的內容。

        // 使用字符串的方法
        var name = 'lidaze age:18 height: 180';
        var num = name.search(/ze/); //參數為正則表達式，返回值為找到的元素的下標
        console.log(num);

        name = name.replace(/\d/g, '0'); //將所有數字替換為0
        console.log(name);

以上代碼在控制臺打印的效果如下：


屏幕快照 2016-05-03 下午5.46.19.png

四、正則表達式語法規則

1、modifiers(修飾詞)

  • i 匹配時忽略大小寫
    var reg1 = /abc/;
    var reg2 = /abc/;
    var reg3 = /abc/i;
    // var reg3 = /abc/i;

    var res1 = reg1.test('32432abc')
    var res2 = reg2.test('32432ABC')
    var res3 = reg3.test('32432ABC')
    console.log(res1,res2,res3);
控制臺打印
  • g 執行時全局匹配

    var string = '32432abc都是寺佛abc'
    // 根據正則表達式查找字符串
    var res1 = string.match(/abc/)
    var res2 = string.match(/abc/g)

    document.write(res1+'<br/>',res2);
代碼執行效果

2、小括號

  • （abc）查找abc這個單詞
  • （abc|(或)bcd|def）查找abc、bcd、def這三個單詞其中的一個
    var reg1 = /abc/ig
    // 查找abc、bcd、def，其中任意一個
    var reg2 = /abc|bcd|def/ig

    var res1 = reg1.test('3243abc')
    var res2 = reg2.test('32432DEF')

    console.log(res1,res2);
控制臺打印效果

3、中括號

  • [12345] 包括1、2、3、4、5其中的某一個
  • [1-9] 包括所有數字
    // 判斷為純數字3種方法
    var reg1 = /^[0-9]+$/g;
    var reg2 = /^[0123456789]+$/g;
    var reg3 = /^\d+$/g;

    var res1 = reg1.test('3242fdjsfdls')
    var res2 = reg2.test('324223423')
    var res3 = reg3.test('2492739203455434')
    console.log(res1,res2,res3);
控制臺打印結果
  • [abc] 包括a、b、c其中的一個
  • [a-z] 包括所有的小寫字母
  • [A-Z] 包括所有的大寫字母
  • [A-z] 包括所有的字母
    // 判斷為純字母3種方法
    var reg1 = /^[a-z]+$/gi;
    var reg2 = /^[abcdefghijklmnopqrstuvwxyz]+$/gi;
    var reg3 = /^[A-z]+$/g;

    var res1 = reg1.test('sfdHHDOODsdsfdls')
    var res2 = reg2.test('Ahdudskfhsk')
    var res3 = reg3.test('sfkshkUHHDKUUSUHOEOEJ')
    console.log(res1,res2,res3);
控制臺打印結果

4、元字符

  • · 代表任何字符 **（注意：如果需要加·的時候需要進行轉義，方法為\·） **。
  • \w任何字母、數字、下劃線。
  • \W然和非字母、數字、下劃線。
  • \d任何數字。
  • \D任何非數字。
  • \s空白字符。
  • \S非空白字符。
以下內容非重點，屬于了解內容
  • \b查找單詞邊界。
  • \B查找非單詞邊界。
  • \0查找null字符。
  • \n查找換行符。
  • \f查找分頁符。
  • \r查找回車符。
  • \t查找制表符。
  • \v查找垂直制表符。

4、量詞

  • ^n匹配開頭為n的字符串。
  • n$匹配結尾為n的字符串。
  • n+匹配任何包含至少一個n的字符串。
  • n{x}匹配任何包含x個n的字符串。
  • n{x,y}匹配任何包含x到y個n的字符串。
以下內容非重點，屬于了解內容
  • n*匹配任何包含0個或者多個n的字符串。
  • n？匹配任何包含0個或1個n的字符串。
  • ？= n匹配任何其后緊接指定字符串n的字符串。
  • ？！n匹配任何其后沒有緊接字符串n的字符串。

五、實例

1、判斷全部數字

        // 判斷為純數字
        var reg = /\D/g;  //取反值
        var reg = /^[0-9]+$/g;
        var reg = /^[0123456789]+$/g;
        var reg = /^\d+$/g;

2、判斷文件后綴為pdf

        // 判斷pdf后綴
        var str = "abc.PDF.pdf";
        var reg = /^.+\.pdf$/i;

3、判斷手機號

// 判斷手機號
var reg = /^((13|18)(\d{9}))$|^(14[57]\d{8})$|^(17[07]\d{8})$|(^15[0-35-9]\d{8}$)/;

4、判斷郵箱

    // 判斷郵箱
    var reg = /^\w+@\w+(\.(com|cn|net|org|edu)){1,2}$/g;

5、判斷IP地址


        // 判斷IP地址
        var str = "1.0.0.0";
        var reg = /^([1-9]|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])(\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])){3}$/;

六、常用正則表達式

js常用正則表達式

整數或者小數：^[0-9]+.{0,1}[0-9]{0,2}$

只能輸入數字："^[0-9]*$"。

只能輸入n位的數字："^\d{n}$"。

只能輸入至少n位的數字："^\d{n,}$"。

只能輸入m~n位的數字："^\d{m,n}$"

只能輸入零和非零開頭的數字："^(0|[1-9][0-9]*)$"。

只能輸入有兩位小數的正實數："^[0-9]+(.[0-9]{2})?$"。

只能輸入有1~3位小數的正實數："^[0-9]+(.[0-9]{1,3})?$"。

只能輸入非零的正整數："^+?[1-9][0-9]*$"。

只能輸入非零的負整數："^-[1-9][]0-9"*$。

只能輸入長度為3的字符："^.{3}$"。

只能輸入由26個英文字母組成的字符串："^[A-Za-z]+$"。

只能輸入由26個大寫英文字母組成的字符串："^[A-Z]+$"。

只能輸入由26個小寫英文字母組成的字符串："^[a-z]+$"。

只能輸入由數字和26個英文字母組成的字符串："^[A-Za-z0-9]+$"。

只能輸入由數字、26個英文字母或者下劃線組成的字符串："^\w+$"。

驗證用戶密碼："^[a-zA-Z]\w{5,17}$" 正確格式為：以字母開頭，長度在6~18之間，只能包含字符、數字和下劃線。

驗證是否含有%&',;=?$"等字符："[%&',;=?$\x22]+"。

只能輸入漢字："^[\u4e00-\u9fa5]{0,}$"

驗證Email地址："^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*$"。

驗證InternetURL：

    ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

驗證電話號碼："^((\d{3,4}-)|\d{3.4}-)?\d{7,8}$"正確格式為："XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX"。

驗證身份證號（15位或18位數字）："^\d{15}|\d{18}$"。

驗證一年的12個月："^(0?[1-9]|1[0-2])$"正確格式為："01"～"09"和"1"～"12"。

驗證一個月的31天："^((0?[1-9])|((1|2)[0-9])|30|31)$"
正確格式為；"01"～"09"和"1"～"31"。

匹配中文字符的正則表達式： [\u4e00-\u9fa5]

匹配雙字節字符(包括漢字在內)：[^\x00-\xff]

應用：計算字符串的長度（一個雙字節字符長度計2，ASCII字符計1）

String.prototype.len=function(){
    return this.replace(/[^\x00-\xff]/g,"aa").length;
}

匹配空行的正則表達式：\n[\s| ]*\r

匹配html標簽的正則表達式：<(.)>(.)</(.)>|<(.)/>

匹配首尾空格的正則表達式：(^\s)|(\s$)

應用：javascript中沒有像vbscript那樣的trim函數，我們就可以利用這個表達式來實現，如下：

String.prototype.trim = function(){

    return this.replace(/(^\s*)|(\s*$)/g, "");

}

利用正則表達式分解和轉換IP地址：
下面是利用正則表達式匹配IP地址，并將IP地址轉換成對應數值的Javascript程序：

function IP2V(ip){
    re=/(\d+)\.(\d+)\.(\d+)\.(\d+)/g //匹配IP地址的正則表達式
    if (re.test(ip)) {
        return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
    } else {
        throw new Error("Not a valid IP address!")
    }
}

不過上面的程序如果不用正則表達式，而直接用split函數來分解可能更簡單，程序如下：

var ip="10.100.20.168"
ip=ip.split(".")
alert("IP值是："+(ip[0]*255*255*255+ip[1]*255*255+ip[2]*255+ip[3]*1))

匹配Email地址的正則表達式：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*

匹配網址URL的正則表達式：http://([\w-]+.)+[\w-]+(/[\w- ./?%&=]*)?

利用正則表達式限制網頁表單里的文本框輸入內容：

用正則表達式限制只能輸入中文：
onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')"
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))"

用正則表達式限制只能輸入全角字符： onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))"

用正則表達式限制只能輸入數字：onkeyup="value=value.replace(/[^\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

用正則表達式限制只能輸入數字和英文：onkeyup="value=value.replace(/[\W]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"

匹配中文字符的正則表達式： [\u4e00-\u9fa5]
評注：匹配中文還真是個頭疼的事，有了這個表達式就好辦了

匹配雙字節字符(包括漢字在內)：[^\x00-\xff]
評注：可以用來計算字符串的長度（一個雙字節字符長度計2，ASCII字符計1）

匹配空白行的正則表達式：\n\s*\r
評注：可以用來刪除空白行

匹配HTML標記的正則表達式：<(\S?)[^>]>.?|<.? />
評注：網上流傳的版本太糟糕，上面這個也僅僅能匹配部分，對于復雜的嵌套標記依舊無能為力

匹配首尾空白字符的正則表達式：^\s|\s$
評注：可以用來刪除行首行尾的空白字符(包括空格、制表符、換頁符等等)，非常有用的表達式

匹配Email地址的正則表達式：\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)*
評注：表單驗證時很實用

匹配網址URL的正則表達式：[a-zA-z]+://[^\s]*
評注：網上流傳的版本功能很有限，上面這個基本可以滿足需求

匹配帳號是否合法(字母開頭，允許5-16字節，允許字母數字下劃線)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
評注：表單驗證時很實用

匹配國內電話號碼：\d{3}-\d{8}|\d{4}-\d{7}
評注：匹配形式如 0511-4405222 或 021-87888822

匹配騰訊QQ號：[1-9][0-9]{4,}
評注：騰訊QQ號從10000開始

匹配中國郵政編碼：[1-9]\d{5}(?!\d)
評注：中國郵政編碼為6位數字

匹配身份證：\d{15}|\d{18}
評注：中國的身份證為15位或18位

匹配ip地址：\d+.\d+.\d+.\d+
評注：提取ip地址時有用

匹配特定數字：
^[1-9]\d$　 　 //匹配正整數
^-[1-9]\d$ 　 //匹配負整數
^-?[1-9]\d$　　 //匹配整數
^[1-9]\d|0$　 //匹配非負整數（正整數 + 0）
^-[1-9]\d|0$　　 //匹配非正整數（負整數 + 0）
^[1-9]\d.\d|0.\d[1-9]\d$　　 //匹配正浮點數
^-([1-9]\d.\d|0.\d[1-9]\d)$　 //匹配負浮點數
^-?([1-9]\d.\d|0.\d[1-9]\d|0?.0+|0)$　 //匹配浮點數
^[1-9]\d.\d|0.\d[1-9]\d|0?.0+|0$　　 //匹配非負浮點數（正浮點數 + 0）
^(-([1-9]\d.\d|0.\d[1-9]\d*))|0?.0+|0$　　//匹配非正浮點數（負浮點數 + 0）
評注：處理大量數據時有用，具體應用時注意修正

匹配特定字符串：
^[A-Za-z]+$　　//匹配由26個英文字母組成的字符串
^[A-Z]+$　　//匹配由26個英文字母的大寫組成的字符串
^[a-z]+$　　//匹配由26個英文字母的小寫組成的字符串
^[A-Za-z0-9]+$　　//匹配由數字和26個英文字母組成的字符串
^\w+$　　//匹配由數字、26個英文字母或者下劃線組成的字符串
評注：最基本也是最常用的一些表達式

整理出來的一些常用的正則表達式所屬分類: JScript (三)
Email : /^\w+([-+.]\w+)@\w+([-.]\w+).\w+([-.]\w+)$/
isEmail1 : /^\w+([.-]\w+)@\w+([.-]\w+).\w+$/;
isEmail2 : /^.@[^_]*$/;

Phone:  /^((\(\d{3}\))|(\d{3}\-))?(\(0\d{2,3}\)|0\d{2,3}-)?[1-9]\d{6,7}$/

Mobile : /^((\(\d{3}\))|(\d{3}\-))?13\d{9}$/

Url : /http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([<>""])$/
IdCard : /^\d{15}(\d{2}[A-Za-z0-9])?$/
Currency : /^\d+(.\d+)?$/
Number : /^\d+$/
Code : /^[1-9]\d{5}$/
QQ : /^[1-9]\d{4,8}$/
Integer : /^[-+]?\d+$/
Double : /^[-+]?\d+(.\d+)?$/
English : /^[A-Za-z]+$/
Chinese : /^[\u0391-\uFFE5]+$/
UnSafe : /^(([A-Z]|[a-z]|\d|[-_~!@#$%^&*.()[]{}<>?\/'"]*)|.{0,5})$|\s/
PassWord :^[\w]{6,12}$
ZipCode : ^[\d]{6}
/^(+\d+ )?((\d+) )?[\d ]+$/; //這個是國際通用的電話號碼判斷
/^(1[0-2]\d|\d{1,2})$/; //這個是年齡的判斷
/^\d+.\d{2}$/; //這個是判斷輸入的是否為貨幣值

<script language=javascript runat=server>
ip_ip = '(25[0-5]|2[0-4]\d|1\d\d|\d\d|\d)';
ip_ipdot = ip + '\.';
isIPaddress = new RegExp('^'+ip_ipdot+ip_ipdot+ipdot+ip_ip+'$');
</script>
應用：計算字符串的長度（一個雙字節字符長度計2，ASCII字符計1）

String.prototype.len=function(){
    return this.replace([^\x00-\xff]/g,"aa").length;
}
應用：javascript中沒有像vbscript那樣的trim函數，我們就可以利用這個表達式來實現，如下：
String.prototype.trim = function()
{
    return this.replace(/(^\s*)|(\s*$)/g, "");
}

匹配空行的正則表達式：\n[\s| ]*\r

匹配HTML標記的正則表達式：/<(.*)>.*<\/\1>|<(.*) \/>/

匹配首尾空格的正則表達式：(^\s*)|(\s*$)

匹配Email地址的正則表達式：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

匹配網址URL的正則表達式：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?


^\d+$　　//匹配非負整數（正整數 + 0）

^[0-9]*[1-9][0-9]*$　　//匹配正整數

^((-\d+)|(0+))$　　//匹配非正整數（負整數 + 0）

^-[0-9]*[1-9][0-9]*$　　//匹配負整數

^-?\d+$　　　　//匹配整數

^\d+(\.\d+)?$　　//匹配非負浮點數（正浮點數 + 0）

^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$　//匹配正浮點數

^((-\d+(\.\d+)?)|(0+(\.0+)?))$　　//匹配非正浮點數（負浮點數 + 0）

^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$ //匹配負浮點數

^(-?\d+)(\.\d+)?$

六、工具網站

驗證正則表達式
我們寫一個正則表達式，可以通過https://regexper.com，來進行驗證。
也可通過http://jquery.cuishifeng.cn/regexp.html，來查詢相關方法

以上內容純屬個人理解，由于水平有限，若有錯漏之處敬請指出斧正，小弟不勝感激。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 正則表達式到底是什么東西？字符是計算機軟件處理文字時最基本的單位，可能是字母，數字，標點符號，空格，換行符，漢字等...
    獅子挽歌閱讀 2,174評論 0贊 9
  • 正則表達式 \n\n\n 【5】正則表達式應用——刪除空行 啟動EditPlus，打開待處理的文本類型文件。 ①、...
    黃花菜已涼閱讀 1,070評論 0贊 4
  • \d 代表 [0-9] \l 代表 [a-z] \u 代表 [A-Z] \a 代表 [A-Za-z] \w 代表 ...
    zhuoshao閱讀 1,403評論 0贊 5
  • 推薦幾個正則表達式編輯器 Debuggex ：https://www.debuggex.com/ PyRegex：...
    木易林1閱讀 11,540評論 9贊 151
  • Start from P159 9.3 繼承 super().__init__(make, model, year...
    開發猛男閱讀 264評論 0贊 0