Mootools 1.2教程 正则表达式


Posted in Javascript onSeptember 15, 2009

如果你还不熟悉怎么使用正则表达式(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"); 
} 
}

要测试的字符串一:
正则表达式
对正则进行转义
忽略大小写
记住,你可能因为使用了没有转义的特殊字符而使演示例子不能正常运行,因此当示例不能运行的时候请不要感到奇怪,因为你一直都在玩这些东西。

更多学习

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

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

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

Javascript 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
jQuery源码分析之Event事件分析
Jun 07 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
jQuery链式操作实例分析
Nov 16 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
jquery使用on绑定a标签无效 只能用live解决
Jun 02 Javascript
微信小程序商城项目之淘宝分类入口(2)
Apr 17 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
利用Angular2的Observables实现交互控制的方法
Dec 27 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 #Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 #Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 #Javascript
You might like
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php实现字符串翻转的方法
2015/03/27 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
js技巧--转义符"\"的妙用
2007/01/09 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
IE bug table元素的innerHTML
2010/01/11 Javascript
js setTimeout 常见问题小结
2013/08/13 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
2013/09/02 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
[44:50]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 TNC vs VG
2018/04/02 DOTA
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
python如何实现word批量转HTML
2020/09/30 Python
文秘专业个人求职信
2013/12/22 职场文书
详细的大学生创业计划书模板
2014/01/27 职场文书
管理建议书范文
2014/05/13 职场文书
会议室标语
2014/06/21 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
庐山导游词
2015/02/03 职场文书
督导岗位职责
2015/02/04 职场文书
2016春节慰问信范文
2015/03/25 职场文书
英语读书笔记
2015/07/02 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
漫画「你在春天醒来」第10卷封面公开
2022/03/21 日漫