Javascript正則表達式教程

來源: RockUX  發布時間: 2011-03-15 07:54  閱讀: 1827 次  推薦: 1   [收藏]  
摘要:正則表達式很可怕很可怕,但是,一旦你記住并且明白了這些符號的意義,那么這些恐懼就會馬上消失。如果你現在心中還有那份恐懼感,那就趕緊往下看吧。

  基礎知識

  學好正則表達式子的關鍵一步就是花一點時間記住這些符號。這是最好的建議了。坐下來,好好記一記,很快的:

  • .:會匹配任何字符,在dotall模式為false的時候不會匹配換行符。
  • *:匹配0個或者多個上面的那個字符可以匹配的
  • +:匹配一個或者多個上面那個字符可以匹配的
  • ?:上述可匹配字符可選,0個或1個
  • \d:匹配一個數字
  • \w:匹配任何字符(字母數字和下劃線)
  • [xyz]:匹配xyz中的一個
  • [xyz]+:匹配xyz中的一個或者多個
  • $:匹配行尾
  • ^:匹配行首
  • [^a-z]:當^在字符集里面的時候,表示不匹配,這個就表示匹配除了小寫字母以外的字符

  恩,這個很枯燥,但是還是得記住,必須的。

  正則表達式工具

  當你的正則表達式不能正常工作的時候(無論是他應該工作還是你覺得他應該工作),你真想把頭發都扯掉。這個工具很有意思RegExr Desktop app,不光可以實時的檢測,還有一個側欄,提供一些常用符號的解釋。

  正則表達式 test()方法

  這個方法接受一個字符串的參數,然后返回一個bool值來表明是否匹配。如果你不需要對匹配結果做特殊的處理–比如驗證用戶名–那么test()方法就夠用了。

 
var username = 'johnsmith';
alert(
/[a-zA-Z_-]+/.test(username)); //return true;

  上面的例子我們聲明的正則表達式用來匹配大小寫字母以及_和-。我們用方括號將這個包起來,表示要匹配的字符集。后面的’+'號表示匹配字符集中的一個或者多個,然后通過test()方法來檢測,因為我們的用戶名johnsmith符合規則,所以返回為true。

  正則表達式 split()方法

  你可能比較熟悉split()方法了。他接受一個正則表達式的參數,用來確定在哪里進行分割,當然用字符串做參數也可以。

 
var str = 'this is my string';
alert(str.split(
/\s/)); //alerts "this,is,my,string"

  傳入\s表示要匹配空格,我們將字符串分割為一個數組,如果你要訪問某一個,那么可以明確指出:

 
var str = 'this is my string';
alert(str.spli(
/\s/)[3]); //alerts string

  正則表達式 replace()方法

  跟你認為的一樣,replace()方法就是去替換一段文本的,替換的參數可以是字符串也可以是正則表達式。

  示例1

  如果你想把’hello world’替換為’hello universe’,那么可以這樣做:

 
var str = 'Hello,World!';
str
= str.replace(/World/,'Universe');
alert(str);

  你可能會問,為什么不直接使用.replace()方法呢,因為這個方法不會復寫本來的變量,所以需要重新賦值一下。

  示例2

  另外一個例子,想象這樣的場景,為了安全起見,我們需要對用戶輸入的內容進行轉義,比如我們需要移除那些符號,引號,分號等等。這樣使用正則就很方便了。

 
var username = 'J;ohnSmith;@%';
username
= username.replace(/[^A-Za-z\d_-]+/, '');
alert(username);
// JohnSmith;@%

  根據最后alert的內容,有人可能認為我們的代碼有問題。其實不是的,J后面的那個分號還是被移除了,如果需要移除字符串中的所有符號,我們需要在最后的/后面加一個g參數。

 
var username = 'J;ohnSmith;@%';
username
= username.replace(/[^A-Za-z\d_-]+/g, '');
alert(username);
// JohnSmith

  經過這樣的處理之后,就去掉了多余的字符了,注意方括號里面的那個^符號,他表示非。真個正則表達式的意思就是匹配所有A-Z、a-z、以及-和下劃線_之外的字符,然后將他們替換為空。

  正則表達式 match()方法

  與test()方法不同的是,match()會返回一個匹配到的字符串的數組。

  示例1

 
var name = 'JeffreyWay';
alert(name.match(
/e/)); //alerts "e"

  我們注意到,這個字符串中有兩個e,但是最后只是alert出來一個,因為缺少了g參數,我們加上之后看看。

 
var name = 'JeffreyWay';
alert(name.match(
/e/g)); //alerts "e,e"

  如果我們想alert某一個具體的,那么可以:

 
var name = 'JeffreyWay';
alert(name.match(
/e/g)[1]); //alerts "e"

  示例2

  我們來看看另外一個例子來加深一下理解。

 
var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
alert(string.match(
/[a-z]+/gi)); // alerts "This,is,just,a,string,with,some,and,some,mixed,in"

  在這個例子中,我們的正則表達式要匹配的是所有的字母,i參數表示忽略大小寫,g參數表示全局查找。所以最后alert的就是字符串中所有的單詞。如果我們輸入要alert的索引值,那么就會輸出相對應的單詞。

 
var string = 'This is just a string with some 12345 and some !@#$ mixed in.';
var matches = string.match(/[a-z]+/gi);
alert(matches[
2]); // alerts "just"

  分割email地址

  為了練習一下,我們來嘗試分割一個email地址—rocker@rockux.com—來取出用戶名rocker和本站地址rockux.com。

 
var email = 'rocker@rockux.com';
alert(email.replace(
/([a-z\d_-]+)@([a-z\d_-]+)\.[a-z]{2,4}/ig, '$1, $2')); // alerts "rocker, rockux";

  如果你之前對于正則表達式不是很熟悉,那么這個看著可能有點恐怖,不過沒關系,我們一點一點來分解。

.replace(/[a-z\d_-]+)

  從中間開始,我們去匹配所有的字母數字下劃線和-,然后使用+號來匹配多個,我們需要訪問這個值,所以用括號括起來。這樣我們在后面就可以引用到。

@([a-z\d-_]+)

  然后去匹配@字符,以及他后面的字母數字下劃線和-,同樣的,我們用括號括起來,一會要訪問他。

\.[a-z]{2,4}/ig

  這一段表示用來匹配后面的域名類型,ig表示全局匹配并且忽略大小寫。在大括號中的數字表示需要匹配的前面字符的起始和結束個數。

‘$1,$2′)

  這一部分表示replace方法的第二個參數,用來輸入需要替換成為的字符。這里我們使用正則表達式中存儲的變量,在這個例子中,$1表示rocker $2表示rockux。

1
0
 
 
 

文章列表

arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()