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 相关文章推荐
Jquery异步请求数据实例代码
Dec 28 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
Jan 30 Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
Sep 03 Javascript
如何根据业务封装自己的功能组件
Apr 19 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php实现的MySQL通用查询程序
2007/03/11 PHP
php 随机生成10位字符代码
2009/03/26 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
PHP UTF8中文字符截断函数代码
2012/09/11 PHP
ThinkPHP水印功能实现修复PNG透明水印并增加JPEG图片质量可调整
2014/11/05 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
javascript解析xml实现省市县三级联动的方法
2015/07/25 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
用file标签实现多图文件上传预览
2017/02/14 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
Python3 max()函数基础用法
2019/02/19 Python
详解Python3中的 input() 函数
2020/03/18 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
新东网科技Java笔试题
2012/07/13 面试题
高中生自我鉴定范文
2013/10/30 职场文书
2014年会策划方案
2014/05/11 职场文书
中专生自荐信
2014/06/25 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
平安建设汇报材料
2014/12/29 职场文书
学校教代会开幕词
2016/03/04 职场文书
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android