欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Mootools 1.2教程 正則表達(dá)式

 更新時(shí)間:2009年09月15日 19:47:19   作者:  
今天我們將先簡(jiǎn)要地看一下正則表達(dá)式,然后再看一下MooTools提供的一些讓正則表達(dá)式更容易使用的功能。
如果你還不熟悉怎么使用正則表達(dá)式(regular expression(regex)),我強(qiáng)烈建議你花一定量的時(shí)間好好看一下這篇文章中的一些鏈接,尤其是文章結(jié)尾“更多學(xué)習(xí)”部分的鏈接。我們今天只是講一講正則表達(dá)式最基本的用法,正則表達(dá)式能做的遠(yuǎn)遠(yuǎn)超過(guò)我們今天所講的內(nèi)容。
基本用法
test()方法
它的簡(jiǎn)單在于,一個(gè)正則表達(dá)式可以是一個(gè)你想要匹配的簡(jiǎn)單字符串。盡管JavaScript本身已經(jīng)為RegExp對(duì)象提供了它自己的test()方法,MooTools的test()方法更好用一些,在JavaScript中使用正則表達(dá)式也更輕松一些。
對(duì)于初學(xué)者,我們先看一下test()方法最簡(jiǎn)單的用法,在一個(gè)大的字符串中查找特定的字符串:
參考代碼:
復(fù)制代碼 代碼如下:

// 我們要在這個(gè)字符串中查找
var string_to_test = "Match anything in here";
// 我們要查找的正則表達(dá)式
var regular_expression = "anything";
// 應(yīng)用正則表達(dá)式,返回true或者false
var result = string_to_test.test(regular_expression);
// result現(xiàn)在為true

這和contains()函數(shù)的行為基本類似,不過(guò)contains是按照完整的單詞查找,而正則表達(dá)式匹配任何它出現(xiàn)的地方。舉個(gè)例子,在下面的這個(gè)實(shí)例中,contains()方法將不返回true,而test()方法將返回true。(Fdream注:經(jīng)taoyu3781212的提醒,這個(gè)說(shuō)法是不正確的。實(shí)際上,contains()方法可以指定兩個(gè)參數(shù),第一個(gè)參數(shù)是要查找的字符串,第二個(gè)是分隔字符串,只有當(dāng)指定第二個(gè)參數(shù)時(shí),contains()方法才會(huì)返回false,這個(gè)實(shí)際上就是array的contains()方法。)
參考代碼:
復(fù)制代碼 代碼如下:

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

另外要注意的是,除非你明確指定,正則表達(dá)式是大小寫敏感的(區(qū)分大小寫),因此你在一個(gè)包含“Match”的字符串中查找“match”將返回false。你可以在下面的例子中試一試:
參考代碼:
復(fù)制代碼 代碼如下:

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

注意,在正則表達(dá)式中有一些特殊字符,你需要小心使用。如果你把這些字符中的任何一個(gè)輸入到下面的正則表達(dá)式文本框中將會(huì)產(chǎn)生錯(cuò)誤,這個(gè)時(shí)候你需要刷新這個(gè)頁(yè)面才能繼續(xù)下面的演示例子。
- . * + ? ^ $ { } ( ) | [ ] / \
要測(cè)試的字符串:
正則表達(dá)式
忽略大小寫
在很多情況下,你不需要關(guān)心你要匹配的項(xiàng)的大小寫。如果你不想要一個(gè)正則表達(dá)式對(duì)大小寫敏感,你可以在調(diào)用test()方法時(shí)添加一個(gè)參數(shù)“i”:
參考代碼:
復(fù)制代碼 代碼如下:

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

從技術(shù)上講,你可以傳遞多個(gè)參數(shù)給test()方法,但是由于JavaScript現(xiàn)在僅僅只支持3個(gè)正則表達(dá)式參數(shù)(其中2個(gè)在test()方法中默認(rèn)啟用),這個(gè)期間內(nèi)你可能僅僅只能使用參數(shù)“i”。你可以繼續(xù)測(cè)試一下大小寫匹配的不同:
參考代碼:
復(fù)制代碼 代碼如下:

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

要測(cè)試的字符串:
正則表達(dá)式
忽略大小寫
有趣的事情
現(xiàn)在我們已經(jīng)學(xué)會(huì)了簡(jiǎn)單的匹配,我們可以開始看一下正則表達(dá)式更令人印象深刻的一些方面。這里不會(huì)涵蓋一切可能與正則表達(dá)式相關(guān)的東西——我們將挑選一些更直接更有用的功能。
使用^從字符串開始匹配
正則表達(dá)式的“^”運(yùn)算符允許你在一行字符串的開頭匹配,而不管字符的后面有沒(méi)有相應(yīng)的匹配。把它放在你要匹配的正則表達(dá)式的開頭,就像下面這樣:
參考代碼:
復(fù)制代碼 代碼如下:

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

繼續(xù)測(cè)試下面的:
要測(cè)試的字符串:
正則表達(dá)式
忽略大小寫
使用$匹配字符串的結(jié)尾
“$”運(yùn)算符的功能和“^”的功能類似,但是有兩點(diǎn)不一樣:
它匹配一個(gè)字符串的結(jié)尾而不是開頭
它放在正則表達(dá)式的結(jié)尾而不是開頭
除此之外,它的所有功能和你期待的一樣:
參考代碼:
復(fù)制代碼 代碼如下:

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

通過(guò)聯(lián)合使用這兩個(gè)運(yùn)算符,你可以做一個(gè)很干凈的測(cè)試:你可以檢查一個(gè)字符串是不是只包含你要匹配的表達(dá)式內(nèi)容而沒(méi)有任何其他東西。
參考代碼:
復(fù)制代碼 代碼如下:

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

要測(cè)試的字符串:
正則表達(dá)式
忽略大小寫
字符集
字符集是另外一個(gè)正則表達(dá)式工具,可以允許你匹配多個(gè)特定的字符(A或者Z),以及一系列的字符(A到Z)。據(jù)個(gè)例子,如果你想測(cè)試一個(gè)字符串中是否包含單詞moo或者boo,通過(guò)字符集,你可以在一個(gè)正則表達(dá)式的方括號(hào)[]內(nèi)放置這兩個(gè)字符來(lái)實(shí)現(xiàn):
參考代碼:
復(fù)制代碼 代碼如下:

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

要測(cè)試的字符串一:
要測(cè)試的字符串二:
正則表達(dá)式
忽略大小寫
為了匹配一系列的字符,你可以單獨(dú)拿出這一系列字符的開頭一個(gè)字符和最后一個(gè)字符,然后把它們用一個(gè)連接符(-)連接起來(lái)。你可以通過(guò)這種方式定義一系列的數(shù)字或者字符:
參考代碼:
復(fù)制代碼 代碼如下:

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

如果你想在多個(gè)字符集中匹配,你可以把你的字符集放在一個(gè)方括號(hào)[]中,然后用“|”運(yùn)算符隔開。
參考代碼:
復(fù)制代碼 代碼如下:

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

要測(cè)試的字符串一:
要測(cè)試的字符串二:
正則表達(dá)式
忽略大小寫
escapeRegExp()方法
當(dāng)你看到正則表達(dá)式建立的方法時(shí),你可能覺得要匹配一些特殊字符非常的困難。舉個(gè)實(shí)際的例子,如果你要在一個(gè)字符串中查找“[stuff-in-here]”或者“$300”時(shí)怎么辦?你可以通過(guò)手動(dòng)地在每個(gè)你要忽略的特殊字符前面添加‘\'來(lái)實(shí)現(xiàn)。
參考代碼:
復(fù)制代碼 代碼如下:

// 我們要匹配的字符串,注意[、]、-和$
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");

這往往是處理正則表達(dá)式頭痛的地方,尤其是你對(duì)它們沒(méi)有完全熟悉的時(shí)候。作為參考,正則表達(dá)式中需要轉(zhuǎn)義的特殊字符包括:
- . * + ? ^ $ { } ( ) | [ ] / \
幸運(yùn)的是,MooTools提供了escapeRegExp()函數(shù),可以確保你的正則表達(dá)式被正確地轉(zhuǎn)義。這是另外一個(gè)字符串函數(shù),因此你只需要在你開始查找之前,在你要匹配的正則表達(dá)式字符串上調(diào)用這個(gè)方法就行了。
參考代碼:
復(fù)制代碼 代碼如下:

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

注意,這意味著你要在正則表達(dá)式中使用的任何特殊字符都必須在轉(zhuǎn)義之后再添加上去:
參考代碼:
復(fù)制代碼 代碼如下:

// 需要轉(zhuǎn)義的字符串
var unescaped_regex_string = "[stuff-in-here]“;
// 轉(zhuǎn)義這個(gè)字符串,從開頭匹配
var escaped_regex_string = “^” + unescaped_regex_string.escapeRegExp();
// escaped_regex_string現(xiàn)在就是“^\[stuff\-in\-here\]”

繼續(xù)在下面的例子中測(cè)試使用escapeRegExp()和不使用的區(qū)別:
參考代碼:
復(fù)制代碼 代碼如下:

var regex_demo = function(){
// 獲取要測(cè)試的字符串
var test_string_1 = $('regex_7_value_1').get('value');
// 獲取要使用的正則表達(dá)式
var regex_value = $('regex_7_match').get('value');
// 檢查我們是不是要轉(zhuǎn)義正則表達(dá)式
if ($('regex_7_escape').checked){
// 如果是的,我們則進(jìn)行轉(zhuǎn)義
regex_value = regex_value.escapeRegExp();
}
// 檢查一下我們是不是要忽略大小寫
var regex_param = "";
if ($('regex_7_param').checked){
regex_param = "i";
}
// 運(yùn)行測(cè)試
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");
}
}

要測(cè)試的字符串一:
正則表達(dá)式
對(duì)正則進(jìn)行轉(zhuǎn)義
忽略大小寫
記住,你可能因?yàn)槭褂昧藳](méi)有轉(zhuǎn)義的特殊字符而使演示例子不能正常運(yùn)行,因此當(dāng)示例不能運(yùn)行的時(shí)候請(qǐng)不要感到奇怪,因?yàn)槟阋恢倍荚谕孢@些東西。

更多學(xué)習(xí)

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

Regular-Expressions.info是一個(gè)很好的參考和學(xué)習(xí)的地方——一個(gè)值得花一些時(shí)間瀏覽的網(wǎng)站。對(duì)于那些熟悉Perl或者熟悉各種語(yǔ)言差異的人,Robert的Perl教程中的關(guān)于正則表達(dá)式這一節(jié)則對(duì)一些基本概念解釋得非常的好。同樣,Stephen Ramsay已經(jīng)寫了一個(gè)關(guān)于Unix正則表達(dá)式的教程,用一種非常清楚和直接了當(dāng)?shù)姆绞街v解了其中的一些概念。

另外一個(gè)不錯(cuò)的地方是正則表達(dá)式庫(kù),它們有數(shù)不清的正則表達(dá)式例子來(lái)完成各種各樣的常見任務(wù)。最后,如果你有勇氣,你應(yīng)該花一些時(shí)間來(lái)看一下Mozilla的JavaScript正則表達(dá)式參考手冊(cè)。這可能非常的多,但是極其有用。如果你想看一下MooTools這邊關(guān)于正則的內(nèi)容,可以看一下test()函數(shù)的文檔

相關(guān)文章

  • Mootools 1.2教程 定時(shí)器和哈希簡(jiǎn)介

    Mootools 1.2教程 定時(shí)器和哈希簡(jiǎn)介

    在今天的教程中,我們將關(guān)注兩塊內(nèi)容:第一個(gè)就是.periodical();方法,然后我們?cè)賹?duì)hash做一個(gè)簡(jiǎn)介。
    2009-09-09
  • Mootools 1.2教程(3) 數(shù)組使用簡(jiǎn)介

    Mootools 1.2教程(3) 數(shù)組使用簡(jiǎn)介

    在上一篇教程——《Mootools 1.2教程(2)——DOM選擇器》中,我們介紹了一下選擇器,其中有很多方法就會(huì)返回?cái)?shù)組(一個(gè)你可以對(duì)其中內(nèi)容進(jìn)行多種操作的特殊列表)。
    2009-09-09
  • Mootools 1.2教程 滑動(dòng)效果(Slide)

    Mootools 1.2教程 滑動(dòng)效果(Slide)

    今天繼續(xù)我們的Mootools 1.2教程的第23課,我們今天來(lái)講一下Fx插件中的Fx.Slide。通過(guò)該插件,可以讓你把內(nèi)容以滑動(dòng)的方式顯示出來(lái)。它使用起來(lái)非常簡(jiǎn)單,是你UI工具箱中一個(gè)很好的工具。
    2009-09-09
  • Mootools 1.2教程 函數(shù)

    Mootools 1.2教程 函數(shù)

    講一講JavaScript中的函數(shù)(function)的基本知識(shí)。
    2009-09-09
  • Mootools 1.2 手風(fēng)琴(Accordion)教程

    Mootools 1.2 手風(fēng)琴(Accordion)教程

    繼續(xù)我們的“更多”(More)庫(kù)里面的插件教程,今天我們來(lái)學(xué)習(xí)一下可能是最流行最受歡迎的插件——手風(fēng)琴。
    2009-09-09
  • Mootools 1.2教程 排序類和方法簡(jiǎn)介

    Mootools 1.2教程 排序類和方法簡(jiǎn)介

    從今天開始,我們將開始講解“更多”(more)庫(kù)里面的更多插件。Sortables是一個(gè)非常強(qiáng)大的插件,能夠真正地?cái)U(kuò)大你的用戶界面設(shè)計(jì)的選擇面。
    2009-09-09
  • Mootools 1.2教程 選項(xiàng)卡效果(Tabs)

    Mootools 1.2教程 選項(xiàng)卡效果(Tabs)

    今天將不只是受限于這個(gè)庫(kù)和一些基本的編程知識(shí),我們來(lái)做一個(gè)簡(jiǎn)單的小項(xiàng)目。通過(guò)使用我們目前為止已經(jīng)學(xué)過(guò)的一些知識(shí),有幾種方式來(lái)創(chuàng)建當(dāng)鼠標(biāo)移上去或者點(diǎn)擊時(shí)顯示相應(yīng)內(nèi)容的tab。
    2009-09-09
  • Mootools 1.2教程(2) DOM選擇器

    Mootools 1.2教程(2) DOM選擇器

    今天開始本系列教程的第2講。在這一講中,我們會(huì)學(xué)習(xí)幾種選擇HTML元素的方法。在許多方面,這是MooTools用得最多最基本的。畢竟,要?jiǎng)?chuàng)建一個(gè)基于HTML元素的交互性用戶體驗(yàn),你必須首先把它們掌握在手中。
    2009-09-09
  • MooTools 1.2介紹

    MooTools 1.2介紹

    有人最近要求我們寫一個(gè)關(guān)于MooTools 1.2的30天的教程,這似乎也是個(gè)很不錯(cuò)的主意,于是我們決定現(xiàn)在就開始。在這些教程中,我們假設(shè)用戶沒(méi)有任何MooTools或者是JavaScript經(jīng)驗(yàn),但是至少有基本的HTML和CSS知識(shí)。
    2009-09-09
  • Mootools 1.2教程 Tooltips

    Mootools 1.2教程 Tooltips

    今天我們將來(lái)看一下MooTools綁定的Tooltip插件。通過(guò)“提示(Tips)”,你可以輕松地自定義一個(gè)包含一個(gè)標(biāo)題和內(nèi)容的工具提示,可以自定義樣式,自定義淡入淡出漸變效果。
    2009-09-09

最新評(píng)論