Mootools 1.2教程 正则表达式
更新时间：2009年09月15日 19:47:19 作者：
今天我们将先简要地看一下正则表达式，然后再看一下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。（Fdream注：经taoyu3781212的提醒，这个说法是不正确的。实际上，contains()方法可以指定两个参数，第一个参数是要查找的字符串，第二个是分隔字符串，只有当指定第二个参数时，contains()方法才会返回false，这个实际上就是array的contains()方法。）
参考代码：
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');
另外要注意的是，除非你明确指定，正则表达式是大小写敏感的（区分大小写），因此你在一个包含“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");
}
}
注意，在正则表达式中有一些特殊字符，你需要小心使用。如果你把这些字符中的任何一个输入到下面的正则表达式文本框中将会产生错误，这个时候你需要刷新这个页面才能继续下面的演示例子。
- . * + ? ^ $ { } ( ) | [ ] / \
要测试的字符串：
正则表达式
忽略大小写
在很多情况下，你不需要关心你要匹配的项的大小写。如果你不想要一个正则表达式对大小写敏感，你可以在调用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");
}
}
要测试的字符串：
正则表达式
忽略大小写
有趣的事情
现在我们已经学会了简单的匹配，我们可以开始看一下正则表达式更令人印象深刻的一些方面。这里不会涵盖一切可能与正则表达式相关的东西——我们将挑选一些更直接更有用的功能。
使用^从字符串开始匹配
正则表达式的“^”运算符允许你在一行字符串的开头匹配，而不管字符的后面有没有相应的匹配。把它放在你要匹配的正则表达式的开头，就像下面这样：
参考代码：
// 我们要测试的字符串
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");
继续测试下面的：
要测试的字符串：
正则表达式
忽略大小写
使用$匹配字符串的结尾
“$”运算符的功能和“^”的功能类似，但是有两点不一样：
它匹配一个字符串的结尾而不是开头
它放在正则表达式的结尾而不是开头
除此之外，它的所有功能和你期待的一样：
参考代码：
// 我们要测试的字符串
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$");
要测试的字符串：
正则表达式
忽略大小写
字符集
字符集是另外一个正则表达式工具，可以允许你匹配多个特定的字符（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");
要测试的字符串一：
要测试的字符串二：
正则表达式
忽略大小写
为了匹配一系列的字符，你可以单独拿出这一系列字符的开头一个字符和最后一个字符，然后把它们用一个连接符（-）连接起来。你可以通过这种方式定义一系列的数字或者字符：
参考代码：
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] ]);
要测试的字符串一：
要测试的字符串二：
正则表达式
忽略大小写
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");
}
}
要测试的字符串一：
正则表达式
对正则进行转义
忽略大小写
记住，你可能因为使用了没有转义的特殊字符而使演示例子不能正常运行，因此当示例不能运行的时候请不要感到奇怪，因为你一直都在玩这些东西。
基本用法
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。（Fdream注：经taoyu3781212的提醒，这个说法是不正确的。实际上，contains()方法可以指定两个参数，第一个参数是要查找的字符串，第二个是分隔字符串，只有当指定第二个参数时，contains()方法才会返回false，这个实际上就是array的contains()方法。）
参考代码：
复制代码 代码如下:
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');
另外要注意的是，除非你明确指定，正则表达式是大小写敏感的（区分大小写），因此你在一个包含“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");
}
}
注意，在正则表达式中有一些特殊字符，你需要小心使用。如果你把这些字符中的任何一个输入到下面的正则表达式文本框中将会产生错误，这个时候你需要刷新这个页面才能继续下面的演示例子。
- . * + ? ^ $ { } ( ) | [ ] / \
要测试的字符串：
正则表达式
忽略大小写
在很多情况下，你不需要关心你要匹配的项的大小写。如果你不想要一个正则表达式对大小写敏感，你可以在调用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");
}
}
要测试的字符串：
正则表达式
忽略大小写
有趣的事情
现在我们已经学会了简单的匹配，我们可以开始看一下正则表达式更令人印象深刻的一些方面。这里不会涵盖一切可能与正则表达式相关的东西——我们将挑选一些更直接更有用的功能。
使用^从字符串开始匹配
正则表达式的“^”运算符允许你在一行字符串的开头匹配，而不管字符的后面有没有相应的匹配。把它放在你要匹配的正则表达式的开头，就像下面这样：
参考代码：
复制代码 代码如下:
// 我们要测试的字符串
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");
继续测试下面的：
要测试的字符串：
正则表达式
忽略大小写
使用$匹配字符串的结尾
“$”运算符的功能和“^”的功能类似，但是有两点不一样：
它匹配一个字符串的结尾而不是开头
它放在正则表达式的结尾而不是开头
除此之外，它的所有功能和你期待的一样：
参考代码：
复制代码 代码如下:
// 我们要测试的字符串
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$");
要测试的字符串：
正则表达式
忽略大小写
字符集
字符集是另外一个正则表达式工具，可以允许你匹配多个特定的字符（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");
要测试的字符串一：
要测试的字符串二：
正则表达式
忽略大小写
为了匹配一系列的字符，你可以单独拿出这一系列字符的开头一个字符和最后一个字符，然后把它们用一个连接符（-）连接起来。你可以通过这种方式定义一系列的数字或者字符：
参考代码：
复制代码 代码如下:
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] ]);
要测试的字符串一：
要测试的字符串二：
正则表达式
忽略大小写
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");
}
}
要测试的字符串一：
正则表达式
对正则进行转义
忽略大小写
记住，你可能因为使用了没有转义的特殊字符而使演示例子不能正常运行，因此当示例不能运行的时候请不要感到奇怪，因为你一直都在玩这些东西。
更多学习
Regular-Expressions.info是一个很好的参考和学习的地方——一个值得花一些时间浏览的网站。对于那些熟悉Perl或者熟悉各种语言差异的人，Robert的Perl教程中的关于正则表达式这一节则对一些基本概念解释得非常的好。同样，Stephen Ramsay已经写了一个关于Unix正则表达式的教程，用一种非常清楚和直接了当的方式讲解了其中的一些概念。
另外一个不错的地方是正则表达式库，它们有数不清的正则表达式例子来完成各种各样的常见任务。最后，如果你有勇气，你应该花一些时间来看一下Mozilla的JavaScript正则表达式参考手册。这可能非常的多，但是极其有用。如果你想看一下MooTools这边关于正则的内容，可以看一下test()函数的文档。
相关文章
在今天的教程中，我们将关注两块内容：第一个就是.periodical();方法，然后我们再对hash做一个简介。2009-09-09
在上一篇教程——《Mootools 1.2教程(2)——DOM选择器》中，我们介绍了一下选择器，其中有很多方法就会返回数组（一个你可以对其中内容进行多种操作的特殊列表）。2009-09-09
今天继续我们的Mootools 1.2教程的第23课，我们今天来讲一下Fx插件中的Fx.Slide。通过该插件，可以让你把内容以滑动的方式显示出来。它使用起来非常简单，是你UI工具箱中一个很好的工具。2009-09-09
讲一讲JavaScript中的函数（function）的基本知识。2009-09-09
继续我们的“更多”（More）库里面的插件教程，今天我们来学习一下可能是最流行最受欢迎的插件——手风琴。2009-09-09
从今天开始，我们将开始讲解“更多”（more）库里面的更多插件。Sortables是一个非常强大的插件，能够真正地扩大你的用户界面设计的选择面。2009-09-09
今天将不只是受限于这个库和一些基本的编程知识，我们来做一个简单的小项目。通过使用我们目前为止已经学过的一些知识，有几种方式来创建当鼠标移上去或者点击时显示相应内容的tab。2009-09-09
今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。2009-09-09
有人最近要求我们写一个关于MooTools 1.2的30天的教程，这似乎也是个很不错的主意，于是我们决定现在就开始。在这些教程中，我们假设用户没有任何MooTools或者是JavaScript经验，但是至少有基本的HTML和CSS知识。2009-09-09
今天我们将来看一下MooTools绑定的Tooltip插件。通过“提示（Tips）”，你可以轻松地自定义一个包含一个标题和内容的工具提示，可以自定义样式，自定义淡入淡出渐变效果。2009-09-09
最新评论