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 相关文章推荐
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
javascript实现密码强度显示
Mar 18 Javascript
javascript实现获取服务器时间
May 19 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 Javascript
vue+springmvc导出excel数据的实现代码
Jun 27 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
详解基于原生JS验证表单组件xy-form
Aug 20 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+APACHE实现用户论证的方法
2006/10/09 PHP
PHP之变量、常量学习笔记
2008/03/27 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
prototype 的说明 js类
2006/09/07 Javascript
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
2013/12/02 Javascript
Node.js异步I/O学习笔记
2014/11/04 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
如何使用jquery实现文字上下滚动效果
2016/10/12 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
前端自动化开发之Node.js的环境搭建教程
2017/04/01 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
Vue 根据条件判断van-tab的显示方式
2020/08/03 Javascript
[02:31]《DAC最前线》之选手酒店现场花絮
2015/01/30 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python利用IPython提高开发效率
2016/08/10 Python
python字符串的方法与操作大全
2018/01/30 Python
Python实现的爬虫刷回复功能示例
2018/06/07 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
Python dict和defaultdict使用实例解析
2020/03/12 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
个人投资合作协议书
2014/10/12 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
交通处罚决定书
2015/06/24 职场文书
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android