Menu

30天學會 MooTools 教學(13): 正規表示式

今天我們將先簡要地看一下正規表示式，然後再看一下MooTools提供的一些讓正規表示式更容易使用的功能。如果你還不熟悉怎麼使用正規表示式 （regular expression（regex）），我強烈建議你花一定量的時間好好看一下這篇文章中的一些鏈接，尤其是文章結尾「更多學習」部分的鏈接。我們今天只 是講一講正規表示式最基本的用法，正規表示式能做的遠遠超過我們今天所講的內容。

 

基本用法

test()方法

它的簡單在於，一個正規表示式可以是一個你想要匹配的簡單字符串。儘管JavaScript本身已經為RegExp對象提供了它自己的test()方法，MooTools的test()方法更好用一些，在JavaScript中使用正規表示式也更輕鬆一些。

對於初學者，我們先看一下test()方法最簡單的用法，在一個大的字符串中查找特定的字符串： 

// 我們要在這個字符串中查找
var string_to_test = "Match anything in here";
 
// 我們要查找的正規表示式
var regular_expression = "anything";
 
// 應用正規表示式，返回true或者false
var result = string_to_test.test(regular_expression);
 
// result現在為true

這和contains()函數的行為基本類似，不過contains是按照完整的單詞查找，而正規表示式匹配任何它出現的地方。舉個例子，在下面的這個實例中，contains()方法將不返回true，而test()方法將返回true： 

var string_to_match = "anything";
 
// 返回false
string_to_match.contains('nything')
 
// 返回true
string_to_match.test('nything');

另外要注意的是，除非你明確指定，正規表示式是大小寫敏感的（區分大小寫），因此你在一個包含「Match」的字符串中查找「match」將返回false。你可以在下面的例子中試一試： 

var regex_demo = function(){
    var test_string = $('regex_1_value').get('value');
    var regex_value = $('regex_1_match').get('value');
    var test_result = test_string.test(regex_value);
 
    if(test_result){
        $('regex_1_result').set('html', "matched");
    }
    else {
        $('regex_1_result').set('html', "didn't match");
    }
}

注意，在正規表示式中有一些特殊字符，你需要小心使用。如果你把這些字符中的任何一個輸入到下面的正規表示式文本框中將會產生錯誤，這個時候你需要刷新這個頁面才能繼續下面的演示例子。

- . * + ? ^ $ { } ( ) | [ ] / \

// -->SCRIPT--> input.t_text{background:none;background:#fff;color:#000}要測試的字符串：
正規表示式
 

 

忽略大小寫

在很多情況下，你不需要關心你要匹配的項的大小寫。如果你不想要一個正規表示式對大小寫敏感，你可以在調用test()方法時添加一個參數「i」： 

// 我們要在這個字符串中查找
var string_to_test = "IgNorE CaSe";
 
// 返回false
string_to_test.test("ignore");
 
// 返回true
string_to_test.test("ignore", "i");

從技術上講，你可以傳遞多個參數給test()方法，但是由於JavaScript現在僅僅只支持3個正規表示式參數（其中2個在test()方法中默認啟用），這個期間內你可能僅僅只能使用參數「i」。你可以繼續測試一下大小寫匹配的不同： 

var regex_demo = function(){
    // 從輸入文本框中得到要測試的字符串
    var test_string = $('regex_2_value').get('value');
 
    // 從輸入文本框中得到正規表示式
    var regex_value = $('regex_2_match').get('value');
 
    // 如果我們需要忽略大小寫
    var regex_param = "";
    if ($('regex_2_param').checked){
        regex_param = "i";
    }
 
    // 運行test()方法並得到結果
    var test_result = test_string.test(regex_value, regex_param);
 
    // 更新結果顯示區域
    if (test_result){
        $('regex_2_result').set('html', "matched");
    }
    else {
        $('regex_2_result').set('html', "didn't match");
    }
}

// -->SCRIPT--> 要測試的字符串：
正規表示式
忽略大小寫
 

 

有趣的事情

現在我們已經學會了簡單的匹配，我們可以開始看一下正規表示式更令人印象深刻的一些方面。這裡不會涵蓋一切可能與正規表示式相關的東西——我們將挑選一些更直接更有用的功能。

 

使用^從字符串開始匹配

正規表示式的「^」運算符允許你在一行字符串的開頭匹配，而不管字符的後面有沒有相應的匹配。把它放在你要匹配的正規表示式的開頭，就像下面這樣： 

// 我們要測試的字符串
var string_to_test = "lets match at the beginning"
 
// 測試這個字符串是不是以lets開頭，返回true
var is_true = string_to_test.match("^lets");
和你期待的一樣，如果這個表達式不是在字符串的開頭，這個測試將返回false:
// 我們要測試的字符串
var string_to_test = "lets match at the beginning";
 
// 測試這個字符串是不是以match開頭，返回false
var is_false = string_to_test.match("^match");

繼續測試下面的：

// -->SCRIPT--> 要測試的字符串：
正規表示式
忽略大小寫
 

 

使用$匹配字符串的結尾

「$」運算符的功能和「^」的功能類似，但是有兩點不一樣：

它匹配一個字符串的結尾而不是開頭 它放在正規表示式的結尾而不是開頭

除此之外，它的所有功能和你期待的一樣： 

// 我們要測試的字符串
var string_to_test = "lets match at the end";
 
// 測試這個字符串是不是以end結尾，返回true
var is_true = string_to_test.match("end$");
 
// 測試這個字符串是不是以the結尾，返回false
var is_false = string_to_test.match("the$");

通過聯合使用這兩個運算符，你可以做一個很乾淨的測試：你可以檢查一個字符串是不是只包含你要匹配的表達式內容而沒有任何其他東西。 

// 我們要測試的字符串
var string_to_test = "lets match everything";
 
// 測試這個字符串是不是完全和"lets match everything"一樣，返回true
var is_true = string_to_test.match("^lets match everything$");
 
// 測試這個字符串是不是完全和"lets everything"一樣，返回false
var is_false = string_to_test.match("^lets everything$");

// -->SCRIPT--> 要測試的字符串：
正規表示式
忽略大小寫
 

 

字符集

字符集是另外一個正規表示式工具，可以允許你匹配多個特定的字符（A或者Z），以及一系列的字符（A到Z）。據個例子，如果你想測試一個字符串中是否包含單詞moo或者boo，通過字符集，你可以在一個正規表示式的方括號[]內放置這兩個字符來實現： 

// 測試moo用的字符串
var first_string_to_test = "cows go moo";
 
// 測試boo用的字符串
var second_string_to_test = "ghosts go boo";
 
// 這匹配第一個字符串而不匹配第二個字符串
var returns_true = first_string_to_test.test("moo");
var returns_false = second_string_to_test("moo");
 
// 這匹配第二個字符串而不匹配第一個字符串
returns_false = first_string_to_test.test("boo");
returns_true = second_string_to_test.test("boo")
 
// 這同時匹配第一個和第二個字符串
returns_true = first_string_to_test("[mb]oo");
returns_true = second_string_to_test("[mb]oo");

// -->SCRIPT--> 要測試的字符串一： 
要測試的字符串二： 
正規表示式
忽略大小寫

為了匹配一系列的字符，你可以單獨拿出這一系列字符的開頭一個字符和最後一個字符，然後把它們用一個連接符（-）連接起來。你可以通過這種方式定義一系列的數字或者字符： 

var string_to_test  = " b or 3";
// 匹配a, b, c, 或者d，返回true
string_to_test.test("[a-d]");
 
// 匹配1, 2, 3, 4, 或者5. 返回 true.
string_to_test.test("[1-5]");

如果你想在多個字符集中匹配，你可以把你的字符集放在一個方括號[]中，然後用「|」運算符隔開。 

var string_to_test = "b or 3";
// 匹配a到d或者1到5，返回true
string_to_test.test([ [a-d] | [1-5] ]);

// -->SCRIPT--> 要測試的字符串一： 
要測試的字符串二： 
正規表示式
忽略大小寫

 

escapeRegExp()方法

當你看到正規表示式建立的方法時，你可能覺得要匹配一些特殊字符非常的困難。舉個實際的例子，如果你要在一個字符串中查找「[stuff-in-here]」或者「$300」時怎麼辦？你可以通過手動地在每個你要忽略的特殊字符前面添加『\』來實現。 

// 我們要匹配的字符串，注意[、]、-和$
var string_to_match = "[stuff-in-here] or $300";
 
// 不正確的匹配方式
string_to_match.test("[stuff-in-here]");
string_to_match.test("$300");
 
// 正確的匹配方式
// 注意[、]、-和$前面的\
string_to_match.test("\[stuff\-in\-here\]");
string_to_match.test("\$300");

這往往是處理正規表示式頭痛的地方，尤其是你對它們沒有完全熟悉的時候。作為參考，正規表示式中需要轉義的特殊字符包括：

- . * + ? ^ $ { } ( ) | [ ] / \

幸運的是，MooTools提供了escapeRegExp()函數，可以確保你的正規表示式被正確地轉義。這是另外一個字符串函數，因此你只需要在你開始查找之前，在你要匹配的正規表示式字符串上調用這個方法就行了。 

// 我們要轉義的字符串
var unescaped_regex_string = "[stuff-in-here]";
 
// 轉義這個字符串
var escaped_regex_string = unescaped_regex_string.escapeRegExp();
 
// 轉義後的字符串是 "\[stuff\-in\-here\]"

注意，這意味著你要在正規表示式中使用的任何特殊字符都必須在轉義之後再添加上去： 

// 需要轉義的字符串
var unescaped_regex_string = "[stuff-in-here]「;
// 轉義這個字符串，從開頭匹配
var escaped_regex_string = 「^」 + unescaped_regex_string.escapeRegExp();
// escaped_regex_string現在就是「^\[stuff\-in\-here\]」

繼續在下面的例子中測試使用escapeRegExp()和不使用的區別： 

var regex_demo = function(){
    // 獲取要測試的字符串
    var test_string_1 = $('regex_7_value_1').get('value');
 
    // 獲取要使用的正規表示式
    var regex_value = $('regex_7_match').get('value');
 
    // 檢查我們是不是要轉義正規表示式
    if ($('regex_7_escape').checked){
        // 如果是的，我們則進行轉義
        regex_value = regex_value.escapeRegExp();
    }
 
    // 檢查一下我們是不是要忽略大小寫
    var regex_param = "";
    if ($('regex_7_param').checked){
        regex_param = "i";
    }
 
    // 運行測試
    var test_result_1 = test_string_1.test(regex_value, regex_param);
    if (test_result_1){
        $('regex_7_result_1').set('html', "matched");
    }
    else {
        $('regex_7_result_1').set('html', "didn't match");
    }
}

// -->SCRIPT--> 要測試的字符串一： 
正規表示式
對正則進行轉義
忽略大小寫

記住，你可能因為使用了沒有轉義的特殊字符而使演示例子不能正常運行，因此當示例不能運行的時候請不要感到奇怪，因為你一直都在玩這些東西。

 

更多學習

下載一個包含你開始所需要的所有東西的zip包

Regular-Expressions.info是一個很好的參考和學習的地方——一個值得花一些時間瀏覽的網站。對於那些熟悉Perl或者熟悉各種語言差異的人，Robert的Perl教程中的關於正規表示式這一節則對一些基本概念解釋得非常的好。同樣，Stephen Ramsay已經寫了一個關於Unix正規表示式的教程，用一種非常清楚和直接了當的方式講解了其中的一些概念。

另外一個不錯的地方是正規表示式庫，它們有數不清的正規表示式例子來完成各種各樣的常見任務。最後，如果你有勇氣，你應該花一些時間來看一下Mozilla的JavaScript正規表示式參考手冊。這可能非常的多，但是極其有用。如果你想看一下MooTools這邊關於正則的內容，可以看一下test()函數的文檔。

 

Mootools 教學列表：