MooTools教程(13):正则表达式

http://www.itjxue.com  2015-08-06 23:19  来源:未知  点击次数: 

今天我们将先简要地看一下正则表达式，然后再看一下MooTools提供的一些让正则表达式更容易使用的功能。如果你还不熟悉怎么使用正则表达式（regular expression（regex）），我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接，尤其是文章结尾“更多学习”部分的链接。我们今天只是讲一讲正则表达式最基本的用法，正则表达式能做的远远超过我们今天所讲的内容。

基本用法

test()方法

它的简单在于，一个正则表达式可以是一个你想要匹配的简单字符串。尽管JavaScript本身已经为RegExp对象提供了它自己的test()方法，MooTools的test()方法更好用一些，在JavaScript中使用正则表达式也更轻松一些。

对于初学者，我们先看一下test()方法最简单的用法，在一个大的字符串中查找特定的字符串：

参考代码： [复制代码] [保存代码]
  1. // 我们要在这个字符串中查找
  2. var string_to_test = "Match anything in here";
  3.  
  4. // 我们要查找的正则表达式
  5. var regular_expression = "anything";
  6.  
  7. // 应用正则表达式，返回true或者false
  8. var result = string_to_test.test(regular_expression);
  9.  
  10. // result现在为true

这和contains()函数的行为基本类似，不过contains是按照完整的单词查找，而正则表达式匹配任何它出现的地方。举个例子，在下面的这个实例中，contains()方法将不返回true，而test()方法将返回true：

参考代码： [复制代码] [保存代码]
  1. var string_to_match = "anything";
  2.  
  3. // 返回false
  4. string_to_match.contains('nything')
  5.  
  6. // 返回true
  7. string_to_match.test('nything');

另外要注意的是，除非你明确指定，正则表达式是大小写敏感的（区分大小写），因此你在一个包含“Match”的字符串中查找“match”将返回false。你可以在下面的例子中试一试：

参考代码： [复制代码] [保存代码]
  1. var regex_demo = function(){
  2.     var test_string = $('regex_1_value').get('value');
  3.     var regex_value = $('regex_1_match').get('value');
  4.     var test_result = test_string.test(regex_value);
  5.  
  6.     if(test_result){
  7.         $('regex_1_result').set('html', "matched");
  8.     }
  9.     else {
  10.         $('regex_1_result').set('html', "didn't match");
  11.     }
  12. }

注意，在正则表达式中有一些特殊字符，你需要小心使用。如果你把这些字符中的任何一个输入到下面的正则表达式文本框中将会产生错误，这个时候你需要刷新这个页面才能继续下面的演示例子。

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

要测试的字符串：
正则表达式
 

忽略大小写

在很多情况下，你不需要关心你要匹配的项的大小写。如果你不想要一个正则表达式对大小写敏感，你可以在调用test()方法时添加一个参数“i”：

参考代码： [复制代码] [保存代码]
  1. // 我们要在这个字符串中查找
  2. var string_to_test = "IgNorE CaSe";
  3.  
  4. // 返回false
  5. string_to_test.test("ignore");
  6.  
  7. // 返回true
  8. string_to_test.test("ignore", "i");

从技术上讲，你可以传递多个参数给test()方法，但是由于JavaScript现在仅仅只支持3个正则表达式参数（其中2个在test()方法中默认启用），这个期间内你可能仅仅只能使用参数“i”。你可以继续测试一下大小写匹配的不同：

参考代码： [复制代码] [保存代码]
  1. var regex_demo = function(){
  2.     // 从输入文本框中得到要测试的字符串
  3.     var test_string = $('regex_2_value').get('value');
  4.  
  5.     // 从输入文本框中得到正则表达式
  6.     var regex_value = $('regex_2_match').get('value');
  7.  
  8.     // 如果我们需要忽略大小写
  9.     var regex_param = "";
  10.     if ($('regex_2_param').checked){
  11.         regex_param = "i";
  12.     }
  13.  
  14.     // 运行test()方法并得到结果
  15.     var test_result = test_string.test(regex_value, regex_param);
  16.  
  17.     // 更新结果显示区域
  18.     if (test_result){
  19.         $('regex_2_result').set('html', "matched");
  20.     }
  21.     else {
  22.         $('regex_2_result').set('html', "didn't match");
  23.     }
  24. }

要测试的字符串：
正则表达式
忽略大小写
 

有趣的事情

现在我们已经学会了简单的匹配，我们可以开始看一下正则表达式更令人印象深刻的一些方面。这里不会涵盖一切可能与正则表达式相关的东西——我们将挑选一些更直接更有用的功能。

使用^从字符串开始匹配

正则表达式的“^”运算符允许你在一行字符串的开头匹配，而不管字符的后面有没有相应的匹配。把它放在你要匹配的正则表达式的开头，就像下面这样：

参考代码： [复制代码] [保存代码]
  1. // 我们要测试的字符串
  2. var string_to_test = "lets match at the beginning"
  3.  
  4. // 测试这个字符串是不是以lets开头，返回true
  5. var is_true = string_to_test.match("^lets");
  6. 和你期待的一样，如果这个表达式不是在字符串的开头，这个测试将返回false:
  7. // 我们要测试的字符串
  8. var string_to_test = "lets match at the beginning";
  9.  
  10. // 测试这个字符串是不是以match开头，返回false
  11. var is_false = string_to_test.match("^match");

继续测试下面的：

要测试的字符串：
正则表达式
忽略大小写
 

使用$匹配字符串的结尾

“$”运算符的功能和“^”的功能类似，但是有两点不一样：

  • 它匹配一个字符串的结尾而不是开头
  • 它放在正则表达式的结尾而不是开头

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

参考代码： [复制代码] [保存代码]
  1. // 我们要测试的字符串
  2. var string_to_test = "lets match at the end";
  3.  
  4. // 测试这个字符串是不是以end结尾，返回true
  5. var is_true = string_to_test.match("end$");
  6.  
  7. // 测试这个字符串是不是以the结尾，返回false
  8. var is_false = string_to_test.match("the$");

通过联合使用这两个运算符，你可以做一个很干净的测试：你可以检查一个字符串是不是只包含你要匹配的表达式内容而没有任何其他东西。

参考代码： [复制代码] [保存代码]
  1. // 我们要测试的字符串
  2. var string_to_test = "lets match everything";
  3.  
  4. // 测试这个字符串是不是完全和"lets match everything"一样，返回true
  5. var is_true = string_to_test.match("^lets match everything$");
  6.  
  7. // 测试这个字符串是不是完全和"lets everything"一样，返回false
  8. var is_false = string_to_test.match("^lets everything$");

要测试的字符串：
正则表达式
忽略大小写
 

字符集

字符集是另外一个正则表达式工具，可以允许你匹配多个特定的字符（A或者Z），以及一系列的字符（A到Z）。据个例子，如果你想测试一个字符串中是否包含单词moo或者boo，通过字符集，你可以在一个正则表达式的方括号[]内放置这两个字符来实现：

参考代码： [复制代码] [保存代码]
  1. // 测试moo用的字符串
  2. var first_string_to_test = "cows go moo";
  3.  
  4. // 测试boo用的字符串
  5. var second_string_to_test = "ghosts go boo";
  6.  
  7. // 这匹配第一个字符串而不匹配第二个字符串
  8. var returns_true = first_string_to_test.test("moo");
  9. var returns_false = second_string_to_test("moo");
  10.  
  11. // 这匹配第二个字符串而不匹配第一个字符串
  12. returns_false = first_string_to_test.test("boo");
  13. returns_true = second_string_to_test.test("boo")
  14.  
  15. // 这同时匹配第一个和第二个字符串
  16. returns_true = first_string_to_test("[mb]oo");
  17. returns_true = second_string_to_test("[mb]oo");

要测试的字符串一： 
要测试的字符串二： 
正则表达式
忽略大小写

为了匹配一系列的字符，你可以单独拿出这一系列字符的开头一个字符和最后一个字符，然后把它们用一个连接符（-）连接起来。你可以通过这种方式定义一系列的数字或者字符：

参考代码： [复制代码] [保存代码]
  1. var string_to_test  = " b or 3";
  2. // 匹配a, b, c, 或者d，返回true
  3. string_to_test.test("[a-d]");
  4.  
  5. // 匹配1, 2, 3, 4, 或者5. 返回 true.
  6. string_to_test.test("[1-5]");

如果你想在多个字符集中匹配，你可以把你的字符集放在一个方括号[]中，然后用“|”运算符隔开。

参考代码： [复制代码] [保存代码]
  1. var string_to_test = "b or 3";
  2. // 匹配a到d或者1到5，返回true
  3. string_to_test.test([ [a-d] | [1-5] ]);

要测试的字符串一： 
要测试的字符串二： 
正则表达式
忽略大小写

escapeRegExp()方法

当你看到正则表达式建立的方法时，你可能觉得要匹配一些特殊字符非常的困难。举个实际的例子，如果你要在一个字符串中查找“[stuff-in-here]”或者“$300”时怎么办？你可以通过手动地在每个你要忽略的特殊字符前面添加‘\’来实现。

参考代码： [复制代码] [保存代码]
  1. // 我们要匹配的字符串，注意[、]、-和$
  2. var string_to_match = "[stuff-in-here] or $300";
  3.  
  4. // 不正确的匹配方式
  5. string_to_match.test("[stuff-in-here]");
  6. string_to_match.test("$300");
  7.  
  8. // 正确的匹配方式
  9. // 注意[、]、-和$前面的\
  10. string_to_match.test("\[stuff\-in\-here\]");
  11. string_to_match.test("\$300");

这往往是处理正则表达式头痛的地方，尤其是你对它们没有完全熟悉的时候。作为参考，正则表达式中需要转义的特殊字符包括：

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

幸运的是，MooTools提供了escapeRegExp()函数，可以确保你的正则表达式被正确地转义。这是另外一个字符串函数，因此你只需要在你开始查找之前，在你要匹配的正则表达式字符串上调用这个方法就行了。

参考代码： [复制代码] [保存代码]
  1. // 我们要转义的字符串
  2. var unescaped_regex_string = "[stuff-in-here]";
  3.  
  4. // 转义这个字符串
  5. var escaped_regex_string = unescaped_regex_string.escapeRegExp();
  6.  
  7. // 转义后的字符串是 "\[stuff\-in\-here\]"

注意，这意味着你要在正则表达式中使用的任何特殊字符都必须在转义之后再添加上去：

参考代码： [复制代码] [保存代码]
  1. // 需要转义的字符串
  2. var unescaped_regex_string = "[stuff-in-here]“;
  3. // 转义这个字符串，从开头匹配
  4. var escaped_regex_string = “^” + unescaped_regex_string.escapeRegExp();
  5. // escaped_regex_string现在就是“^\[stuff\-in\-here\]”

继续在下面的例子中测试使用escapeRegExp()和不使用的区别：

参考代码： [复制代码] [保存代码]
  1. var regex_demo = function(){
  2.     // 获取要测试的字符串
  3.     var test_string_1 = $('regex_7_value_1').get('value');
  4.  
  5.     // 获取要使用的正则表达式
  6.     var regex_value = $('regex_7_match').get('value');
  7.  
  8.     // 检查我们是不是要转义正则表达式
  9.     if ($('regex_7_escape').checked){
  10.         // 如果是的，我们则进行转义
  11.         regex_value = regex_value.escapeRegExp();
  12.     }
  13.  
  14.     // 检查一下我们是不是要忽略大小写
  15.     var regex_param = "";
  16.     if ($('regex_7_param').checked){
  17.         regex_param = "i";
  18.     }
  19.  
  20.     // 运行测试
  21.     var test_result_1 = test_string_1.test(regex_value, regex_param);
  22.     if (test_result_1){
  23.         $('regex_7_result_1').set('html', "matched");
  24.     }
  25.     else {
  26.         $('regex_7_result_1').set('html', "didn't match");
  27.     }
  28. }

要测试的字符串一： 
正则表达式
对正则进行转义
忽略大小写

记住，你可能因为使用了没有转义的特殊字符而使演示例子不能正常运行，因此当示例不能运行的时候请不要感到奇怪，因为你一直都在玩这些东西。

更多学习

下载一个包含你开始所需要的所有东西的zip包

Regular-Expressions.info是一个很好的参考和学习的地方——一个值得花一些时间浏览的网站。对于那些熟悉Perl或者熟悉各种语言差异的人，Robert的Perl教程中的关于正则表达式这一节则对一些基本概念解释得非常的好。同样，Stephen Ramsay已经写了一个关于Unix正则表达式的教程，用一种非常清楚和直接了当的方式讲解了其中的一些概念。

另外一个不错的地方是正则表达式库，它们有数不清的正则表达式例子来完成各种各样的常见任务。最后，如果你有勇气，你应该花一些时间来看一下Mozilla的JavaScript正则表达式参考手册。这可能非常的多，但是极其有用。如果你想看一下MooTools这边关于正则的内容，可以看一下test()函数的文档。

(责任编辑：IT教学网)

更多

阅读排行

推荐Javascript/Ajax文章

最新更新Javascript/Ajax