第9章 正則表達式

時間  2019-11-13
標籤 正則 表達式 欄目 正則表達式 简体版
原文   原文鏈接

第 10 章 正則表達式正則表達式

 

學習要點：express

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

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

3.獲取控制服務器

4.經常使用的正則函數

 

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

 

什麼是正則表達式

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

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

 

 

建立正則表達式

建立正則表達式和建立字符串相似，建立正則表達式提供了兩種方法，一種是採用 newgoogle

運算符，另外一個是採用字面量方式。

 

1.兩種建立方式

var box = new RegExp('box');                            //第一個參數字符串

var box = new RegExp('box', 'ig');                      //第二個參數可選模式修飾符

 

模式修飾符的可選參數

 

參  數

含  義

i

忽略大小寫

g

全局匹配

m

多行匹配

 

 

var box = /box/;                                               //直接用兩個反斜槓

var box = /box/ig;                                            //在第二個斜槓後面加上模式修飾符

 

 

 

2.測試正則表達式

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

 

RegExp 對象的方法

 

方  法

功  能

test

在字符串中測試模式匹配，返回 true 或 false

exec

在字符串中執行匹配搜索，返回結果數組

 

 

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

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

 

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

var pattern = /box/i;                                          //建立正則模式，不區分大小寫

var str = 'This is a Box!';

alert(pattern.test(str));

 

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

alert(/box/i.test('This is a Box!'));                       //模式和字符串替換掉了兩個變量

 

/*使用 exec 返回匹配數組*/

var pattern = /box/i;

var str = 'This is a Box!';

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 方法獲取獲取匹配數組*/

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 來查找匹配數據*/

var pattern = /box/ig;

var str = 'This is a Box!，That is a Box too';

alert(str.search(pattern));                                   //查找到返回位置，不然返回-1

 

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

 

/*使用 replace 替換匹配到的數據*/

var pattern = /box/ig;

var str = 'This is a Box!，That is a Box too';

alert(str.replace(pattern, 'Tom'));                               //將 Box 替換成了 Tom

 

/*使用 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 = 'google';

alert(pattern.test(str));

 

/*重複匹配*/

var pattern = /g.*gle/;                                       //.匹配 0 個一個或多個 var str = 'google';                                                                      //*,?,+,{n,m} alert(pattern.test(str));

 

/*使用字符類匹配*/

var pattern = /g[a-zA-Z_]*gle/;                          //[a-z]*表示任意個 a-z 中的字符

var str = 'google';

alert(pattern.test(str));

 

var pattern = /g[^0-9]*gle/;                               //[^0-9]*表示任意個非 0-9 的字符

var str = 'google';

alert(pattern.test(str));

 

var pattern = /[a-z][A-Z]+/;                               //[A-Z]+表示 A-Z 一次或屢次

var str = 'gOOGLE';

alert(pattern.test(str));

 

/*使用元符號匹配*/

var pattern = /g\w*gle/;                                     //\w*匹配任意多個全部字母數字_

var str = 'google';

alert(pattern.test(str));

 

var pattern = /google\d*/;                                  //\d*匹配任意多個數字

var str = 'google444';

alert(pattern.test(str));

 

var pattern = /\D{7,}/;                                      //\D{7,}匹配至少 7 個非數字

var str = 'google8';

alert(pattern.test(str));

 

/*使用錨元字符匹配*/

var pattern = /^google$/;                                   //^從開頭匹配，$從結尾開始匹配

var str = 'google';

alert(pattern.test(str));

 

 

 

var pattern = /goo\sgle/;                                    //\s 能夠匹配到空格

var str = 'goo gle';

alert(pattern.test(str));

 

var pattern = /google\b/;                                    //\b 能夠匹配是否到了邊界

var str = 'google';

alert(pattern.test(str));

 

/*使用或模式匹配*/

var pattern = /google|baidu|bing/;                       //匹配三種其中一種字符串

var str = 'google';

alert(pattern.test(str));

 

/*使用分組模式匹配*/

var pattern = /(google){4,8}/;                            //匹配分組裏的字符串 4-8 次

var str = 'googlegoogle';

alert(pattern.test(str));

 

var pattern = /8(.*)8/;                                       //獲取 8..8 之間的任意字符

var str = 'This is 8google8';

str.match(pattern);

alert(RegExp.$1);                                             //獲得第一個分組裏的字符串內容

 

 

var pattern = /8(.*)8/;

var str = 'This is 8google8';

var result = str.replace(pattern,'<strong>$1</strong>');       //獲得替換的字符串輸出

document.write(result);

 

 

var pattern = /(.*)\s(.*)/;

var str = 'google baidu';

var result = str.replace(pattern, '$2 $1');              //將兩個分組的值替換輸出

document.write(result);

 

 

貪  婪

惰  性

+

+?

?

??

*

*?

{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 返回數組*/

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));

 

var pattern = /(\d+)(?:[a-z])/;                             //非捕獲性分組

var str = '123abc';

alert(pattern.exec(str));

 

/*使用分組嵌套*/

var pattern = /(A?(B?(C?)))/;                             //從外往內獲取

var str = 'ABC';

alert(pattern.exec(str));

 

 

 

/*使用前瞻捕獲*/

var pattern = /(goo(?=gle))/;                              //goo 後面必須跟着 gle 才能捕獲

var str = 'google';

alert(pattern.exec(str));

 

 

 

/*使用特殊字符匹配*/

var pattern = /\.\[\/b\]/;                                      //特殊字符，用\符號轉義便可

var str = '.[/b]';

alert(pattern.test(str));

 

/*使用換行模式*/

var pattern = /^\d+/mg;                                     //啓用了換行模式

var str = '1.baidu\n2.google\n3.bing'; var result = str.replace(pattern, '#'); alert(result);

 

經常使用的正則

 

1.檢查郵政編碼

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

alert(pattern.test(str));

 

2.檢查文件壓縮包

var pattern = /[\w]+\.zip|rar|gz/;                         //\d\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：以上是簡單電子郵件驗證，複雜的要比這個複雜不少，你們能夠搜一下。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程