第一百零五節，JavaScript正則表達式

時間 2019-11-12

標籤第一百零五 javascript 正則表達式欄目 JavaScript 简体版

原文原文鏈接

JavaScript正則表達式正則表達式

學習要點：express

1.什麼是正則表達式數組

2.建立正則表達式瀏覽器

3.獲取控制服務器

4.經常使用的正則函數

假設用戶須要在HTML表單中填寫姓名、地址、出生日期等。那麼在將表單提交到服務器進一步處理前，JavaScript程序會檢查表單以確認用戶確實輸入了信息而且這些信息是符合要求的。學習

一．什麼是正則表達式測試

正則表達式(regular expression)是一個描述字符模式的對象。ECMAScript的RegExp類表示正則表達式，而String和RegExp都定義了使用正則表達式進行強大的模式匹配和文本檢索與替換的函數。網站

正則表達式主要用來驗證客戶端的輸入數據。用戶填寫完表單單擊按鈕以後，表單就會被髮送到服務器，在服務器端一般會用PHP、ASP.NET等服務器腳本對其進行進一步處理。由於客戶端驗證，能夠節約大量的服務器端的系統資源，而且提供更好的用戶體驗。this

二．建立正則表達式

建立正則表達式和建立字符串相似，建立正則表達式提供了兩種方法，一種是採用new運算符，另外一個是採用字面量方式。

1.兩種建立方式

經過new關鍵字和RegExp()建立表達式

RegExp()表達式對象，【有參，第一個參數是字符串，第二個參數是模式修飾符】

var asdc = "叫賣錄音網";
var asdc2 = new RegExp(asdc);  //建立正則對象，將字符串傳入表達式
alert(asdc2); //打印出表達式，返回/叫賣錄音網/

var asdc = "叫賣錄音網";
var asdc2 = new RegExp(asdc,'ig');  //建立正則對象，將字符串傳入表達式,而且寫了正則模式修飾符
alert(asdc2); //打印出表達式，返回/叫賣錄音網/gi

模式修飾符的可選參數

參數	含義
i	忽略大小寫
g	全局匹配
m	多行匹配

字面量方式建立正則

var asdc2 = /叫賣錄音網/;    //字面量方式建立正則
var asdc3 = /叫賣錄音網/ig;  //字面量方式建立正則，而且寫入模式修飾符
alert(asdc2);   //打印正則，返回/叫賣錄音網/
alert(asdc3);   ////打印正則，返回/叫賣錄音網/gi

2.測試正則表達式

RegExp對象包含兩個方法：test()和exec()，功能基本類似，用於測試字符串匹配。test()方法在字符串中查找是否存在指定的正則表達式並返回布爾值，若是存在則返回true，不存在則返回false。exec()方法也用於在字符串中查找指定正則表達式，若是exec()方法執行成功，則返回包含該查找字符串的相關信息數組。若是執行失敗，則返回null。

RegExp對象的方法

方法	功能
test	在字符串中測試模式匹配，返回true或false
exec	在字符串中執行匹配搜索，返回結果數組

test()方法在字符串中查找是否存在指定的正則表達式並返回布爾值，若是存在則返回true，不存在則返回false。

使用new運算符的test方法示例

/*使用new運算符的test方法示例*/
var pattern = new RegExp('box', 'i');            //建立正則模式，不區分大小寫
var str = 'This is a Box!';                        //建立要比對的字符串
alert(pattern.test(str));                        //經過test()方法驗證是否匹配,返回true

使用字面量方式的test方法示例

/*使用字面量方式的test方法示例*/
var pattern = /box/i;                            //建立正則模式，不區分大小寫
var str = 'This is a Box!';                    //建立要匹配的字符串
alert(pattern.test(str));                    //經過test()方法驗證是否匹配，true

使用一條語句實現正則匹配

/*使用一條語句實現正則匹配*/
alert(/box/i.test('This is a Box!'));                //模式和字符串替換掉了兩個變量

exec()方法也用於在字符串中查找指定正則表達式，若是exec()方法執行成功，則返回包含該查找字符串的相關信息數組。若是執行失敗，則返回null。

使用exec返回匹配數組

/*使用exec返回匹配數組*/
var pattern = /錄音/i;                          //建立正則匹配模式
var str = '專業廣告錄音網站';                     //建立要匹配的字符串
alert(pattern.exec(str));                        //匹配了返回數組，不然返回null

PS：exec方法還有其餘具體應用，咱們在獲取控制學完後再看。

3.使用字符串的正則表達式方法

除了test()和exec()方法，String對象也提供了4個使用正則表達式的方法。

String對象中的正則表達式方法

方法	含義
match(pattern)	返回pattern中的子串或null
replace(pattern, replacement)	用replacement替換pattern
search(pattern)	返回字符串中pattern開始位置
split(pattern)	返回字符串按指定pattern拆分的數組

match()返回匹配到的字符串以數組形式，加上length屬性還能夠返回匹配到的數組長度

/*使用match方法獲取獲取匹配數組*/
var pattern = /box/ig;                        //全局搜索
var str = 'This is a Box!，That is a Box too';
alert(str.match(pattern));                        //匹配到兩個Box,Box
alert(str.match(pattern).length);                //獲取數組的長度

search()返回匹配字符串的開始位置

/*使用search來查找匹配數據*/
var pattern = /box/ig;
var str = 'This is a Box!，That is a Box too';
alert(str.search(pattern));                        //查找到返回位置，不然返回-1

PS：由於search方法查找到即返回，也就是說無需g全局

replace()將匹配到的字符串替換成別的字符串

/*使用replace替換匹配到的數據*/
var pattern = /box/ig;
var str = 'This is a Box!，That is a Box too';
alert(str.replace(pattern, 'Tom'));                //將Box替換成了Tom

split()返回字符串按指定匹配拆分的數組

/*使用split拆分紅字符串數組*/
var pattern = /！/ig;
var str = 'This is a Box!，That is a Box too';
alert(str.split(pattern));                        //將空格拆開分組成數組

RegExp對象的靜態屬性

屬性	短名	含義
input	$_	當前被匹配的字符串
lastMatch	$&	最後一個匹配字符串
lastParen	$+	最後一對圓括號內的匹配子串
leftContext	$`	最後一次匹配前的子串
multiline	$*	用於指定是否全部的表達式都用於多行的布爾值
rightContext	$'	在上次匹配以後的子串

使用靜態屬性

/*使用靜態屬性*/
var pattern = /(g)oogle/;
var str = 'This is google！';
pattern.test(str);                            //必須執行一下
alert(RegExp.input);                        //This is google！
alert(RegExp.leftContext);                    //This is
alert(RegExp.rightContext);                    //！
alert(RegExp.lastMatch);                    //google
alert(RegExp.lastParen);                    //g
alert(RegExp.multiline);                    //false

PS：Opera不支持input、lastMatch、lastParen和multiline屬性。IE不支持multiline屬性。

全部的屬性可使用短名來操做

RegExp.input能夠改寫成RegExp['$_']，依次類推。但RegExp.input比較特殊，它還能夠寫成RegExp.$_。

RegExp對象的實例屬性

屬性	含義
global	Boolean值，表示g是否已設置
ignoreCase	Boolean值，表示i是否已設置
lastIndex	整數，表明下次匹配將從哪裏字符位置開始
multiline	Boolean值，表示m是否已設置
Source	正則表達式的源字符串形式

使用實例屬性

/*使用實例屬性*/
var pattern = /google/ig;
alert(pattern.global);                        //true，是否全局了
alert(pattern.ignoreCase);                    //true，是否忽略大小寫
alert(pattern.multiline);                        //false，是否支持換行
alert(pattern.lastIndex);                        //0，下次的匹配位置
alert(pattern.source);                        //google，正則表達式的源字符串

var pattern = /google/g;
var str = 'google google google';
pattern.test(str);                            //google，匹配第一次
alert(pattern.lastIndex);                        //6，第二次匹配的位

PS：以上基本沒什麼用。而且lastIndex在獲取下次匹配位置上IE和其餘瀏覽器有誤差，主要表如今非全局匹配上。lastIndex還支持手動設置，直接賦值操做

三．獲取控制

正則表達式元字符是包含特殊含義的字符。它們有一些特殊功能，能夠控制匹配模式的方式。反斜槓後的元字符將失去其特殊含義。

字符類：單個字符和數字

元字符/元符號	匹配狀況
.	匹配除換行符外的任意字符
[a-z0-9]	匹配括號中的字符集中的任意字符
[^a-z0-9]	匹配任意不在括號中的字符集中的字符
\d	匹配數字
\D	匹配非數字，同[^0-9]相同
\w	匹配字母和數字及_
\W	匹配非字母和數字及_

字符類：空白字符

元字符/元符號	匹配狀況
\0	匹配null字符
\b	匹配空格字符
\f	匹配進紙字符
\n	匹配換行符
\r	匹配回車字符
\t	匹配製表符
\s	匹配空白字符、空格、製表符和換行符
\S	匹配非空白字符

字符類：錨字符

元字符/元符號	匹配狀況
^	行首匹配
$	行尾匹配
\A	只有匹配字符串開始處
\b	匹配單詞邊界，詞在[]內時無效
\B	匹配非單詞邊界
\G	匹配當前搜索的開始位置
\Z	匹配字符串結束處或行尾
\z	只匹配字符串結束處

字符類：重複字符

元字符/元符號	匹配狀況
x?	匹配0個或1個x
x*	匹配0個或任意多個x
x+	匹配至少一個x
(xyz)+	匹配至少一個(xyz)
x{m,n}	匹配最少m個、最多n個x

字符類：替代字符

元字符/元符號	匹配狀況
this\|where\|logo	匹配this或where或logo中任意一個

字符類：記錄字符

元字符/元符號	匹配狀況
(string)	用於反向引用的分組
\1或$1	匹配第一個分組中的內容
\2或$2	匹配第二個分組中的內容
\3或$3	匹配第三個分組中的內容

.匹配除換行符之外的任意字符

/*使用點元字符*/
var pattern = /g.gle/;                        //.匹配一個任意字符
var str = 'g@gle';
alert(pattern.test(str));                   //返回true

*匹配0個一個或者多個前導字符

/*重複匹配*/
var pattern = /g.*gle/;                        //*匹配0個一個或者多個前導字符
var str = 'g2456gle';
alert(pattern.test(str));

var pattern2 = /gi*gle/;                    //*匹配0個一個或者多個前導字符
var str2 = 'giigle';
alert(pattern2.test(str2));

+匹配至少一個前導字符

var pattern2 = /gi+gle/;                    // +匹配至少一個前導字符
var str2 = 'giigle';
alert(pattern2.test(str2));

？匹配0個或一個前導字符

var pattern2 = /gi?gle/;                    //？匹配0個或一個前導字符
var str2 = 'gigle';
alert(pattern2.test(str2));

{}匹配指定數量範圍的前導字符

var pattern2 = /gi{2,4}gle/;                    //{}匹配指定數量範圍的前導字符
var str2 = 'giiiigle';
alert(pattern2.test(str2));

[a-z]匹配小寫字母a到z之間的任意一個字母

var pattern2 = /gi[a-z]gle/;                    //[a-z]匹配小寫字母a到z之間的任意一個字母
var str2 = 'gixgle';
alert(pattern2.test(str2));

[0-9]匹配數字0到9之間的任意一個數字

var pattern2 = /gi[0-9]gle/;                    //[0-9]匹配數字0到9之間的任意一個數字
var str2 = 'gi5gle';
alert(pattern2.test(str2));

[a-zA-Z0-9]匹配小寫字母或者大寫字母a到z之間數字0到9之間的任意一個字母或者數字

var pattern2 = /gi[a-zA-Z0-9]gle/;                    //[a-zA-Z0-9]匹配小寫字母或者大寫字母a到z之間數字0到9之間的任意一個字母或者數字
var str2 = 'giFgle';
alert(pattern2.test(str2));

[^]非，後導字符不相同或者不在範圍就匹配，反向匹配

^若是不是寫在元字符裏的，是另一個意思

var pattern2 = /gi[^a-zA-Z0-9]gle/;                    //[^]非，後導字符不相同或者不在範圍就匹配，反向匹配
var str2 = 'gi!gle';
alert(pattern2.test(str2));

\d匹配數字等同於[0-9]

var pattern2 = /\digle/;                    //\d匹配數字等同於[0-9]
var str2 = '5555555igle';
alert(pattern2.test(str2));

\D匹配非數字，等同於[^0-9]

var pattern2 = /\Digle/;                    //\D匹配非數字，等同於[^0-9]
var str2 = 'Tigle';
alert(pattern2.test(str2));

\w匹配字母及數字和_下劃線

var pattern2 = /\wigle/;                    //\w匹配字母及數字和_下劃線
var str2 = '5igle';
alert(pattern2.test(str2));

\W匹配非字母及數字和_下劃線

var pattern2 = /\Wigle/;                    //\W匹配非字母及數字和_下劃線
var str2 = '!igle';
alert(pattern2.test(str2));

^行首匹配

var pattern2 = /^[0-9]igle/;                    //^首行匹配
var str2 = '5igle';
alert(pattern2.test(str2));

$行尾匹配

var pattern2 = /igle$/;                    //$行尾匹配
var str2 = '1121555igle';
alert(pattern2.test(str2));

\s匹配空白字符、空格、製表符和換行符

var pattern2 = /ig\sle/;                    //\s匹配空白字符、空格、製表符和換行符
var str2 = 'ig le';
alert(pattern2.test(str2));

\b匹配是否到達了邊際

var pattern2 = /igle\b/;                    //\b匹配是否到達了邊際
var str2 = 'igle';
alert(pattern2.test(str2));

|或模式匹配，其中任意一個符合就匹配

var pattern2 = /igle|adc|varjk/;                    //|或模式匹配，其中任意一個符合就匹配
var str2 = 'adc';
alert(pattern2.test(str2));

()分組，組裏的能夠看作一個總體

var pattern2 = /(igle)45(adc)/;                    //()分組，組裏的能夠看作一個總體
var str2 = 'igle45adc';
alert(pattern2.test(str2));

$獲取匹配內容裏分組部分，後面跟要獲取第幾個分組如$1

var pattern2 = /(igle)45(adc)/;                    //()分組，組裏的能夠看作一個總體
var str2 = 'igle45adc';                        //執行一次
str2.match(pattern2);
alert(RegExp.$1);                               //打印匹配內容裏分組部分

替換匹配內容裏分組部分

var pattern1 = /8(.*)8/;
var str1 = 'This is 8google8';
var result1 = str1.replace(pattern1,'<strong>$1</strong>');        //獲得替換的字符串輸出
document.write(result1);

var pattern2 = /(.*)\s(.*)/;
var str2 = 'google baidu';
var result2 = str2.replace(pattern2, '$2 $1');            //將兩個分組的值替換輸出
document.write(result2);

貪婪和惰性

貪婪	惰性
+	+?
?	??
*	*?
{n}	{n}?
{n,}	{n,}?
{n,m}	{n,m}?

關於貪婪和惰性

var pattern = /[a-z]+?/;                        //?號關閉了貪婪匹配，只替換了第一個
var str = 'abcdefjhijklmnopqrstuvwxyz';
var result = str.replace(pattern, 'xxx');
alert(result);

禁止了貪婪，開啓的全局

var pattern = /8(.+?)8/g;                        //禁止了貪婪，開啓的全局
var str = 'This is 8google8, That is 8google8, There is 8google8';
var result = str.replace(pattern,'<strong>$1</strong>');
document.write(result);

另外一種禁止貪婪

var pattern = /8([^8]*)8/g;                    //另外一種禁止貪婪
var str = 'This is 8google8, That is 8google8, There is 8google8';
var result = str.replace(pattern,'<strong>$1</strong>');
document.write(result);

使用exec返回數組，也就是能夠用exec()方法將匹配到的內容輸出

var pattern = /^[a-z]+\s[0-9]{4}$/i;
var str = 'google 2012';
alert(pattern.exec(str));                        //返回包含字符串的數組

只匹配字母

var pattern = /^[a-z]+/i;                        //只匹配字母
var str = 'google 2012';
alert(pattern.exec(str));                        //返回google

使用分組

var pattern = /^([a-z]+)\s([0-9]{4})$/i;            //使用分組
var str = 'google 2012';
alert(pattern.exec(str)[0]);                    //google 2012
alert(pattern.exec(str)[1]);                    //google
alert(pattern.exec(str)[2]);                    //2012

捕獲性分組和非捕獲性分組，就是全部分組都捕獲

捕獲性分組

var pattern = /(\d+)([a-z])/;                    //捕獲性分組
var str = '123abc';
alert(pattern.exec(str));                       //返回數組類型的123a,123,a

非捕獲性分組

var pattern = /(\d+)(?:[a-z])/;                    //非捕獲性分組
var str = '123abc';
alert(pattern.exec(str));                //返回數組123a,123

使用分組嵌套

/*使用分組嵌套*/
var pattern = /(A?(B?(C?)))/;                    //從外往內獲取
var str = 'ABC';
alert(pattern.exec(str));          //返回分組ABC,ABC,BC,C

使用前瞻捕獲

/*使用前瞻捕獲*/
var pattern = /(goo(?=gle))/;                    //goo後面必須跟着gle才能捕獲
var str = 'google';
alert(pattern.exec(str));                    //返回數組goo,goo

使用特殊字符匹配

/*使用特殊字符匹配*/
var pattern = /\.\[\/b\]/;                        //特殊字符，用\符號轉義便可
var str = '.[/b]';
alert(pattern.test(str));                    //返回true

使用換行模式

/*使用換行模式*/
var pattern = /^\d+/mg;                        //啓用了換行模式
var str = '1.baidu\n2.google\n3.bing';
var result = str.replace(pattern, '#');
alert(result);
//返回
//#.baidu
//#.google
//#.bing

四．經常使用的正則

1.檢查郵政編碼

var pattern = /[1-9][0-9]{5}/;                    //共6位數字，第一位不能爲0
var str = '224000';
alert(pattern.test(str));

2.檢查文件壓縮包和文件格式

var pattern = /^[\w]+\.(zip|rar|gz)&/;                //\w表示全部數字和字母加下劃線
var str = '123.zip';                            //\.表示匹配.，後面是一個選擇
alert(pattern.test(str));

3.刪除多餘空格

var pattern = /\s/g;                            //g必須全局，才能所有匹配
var str = '111 222 333';
var result = str.replace(pattern,'');                //把空格匹配成無空格
alert(result);

4.刪除首尾空格

var pattern = /^\s+/;                            //強制首
var str = '          goo  gle            ';
var result = str.replace(pattern, '');
pattern = /\s+$/;                            //強制尾
result = result.replace(pattern, '');
alert('|' + result + '|');

使用了非貪婪捕獲

var pattern = /^\s*(.+?)\s*$/;                    //使用了非貪婪捕獲
var str = '            google          ';
alert('|' + pattern.exec(str)[1] + '|');

使用了分組獲取

var pattern = /^\s*(.+?)\s*$/;
var str = '            google          ';
alert('|' + str.replace(pattern, '$1') + '|');            //使用了分組獲取

5.簡單的電子郵件驗證

var pattern = /^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));

var pattern = /^([\w\.\-]+)@([\w\.\-]+)\.([\w]{2,4})$/;
var str = 'yc60.com@gmail.com';
alert(pattern.test(str));

PS：以上是簡單電子郵件驗證，複雜的要比這個複雜不少，你們能夠搜一下。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。