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 相关文章推荐
js格式化金额可选是否带千分位以及保留精度
Jan 28 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
drag-and-drop实现图片浏览器预览
Aug 06 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
js实现录音上传功能
Nov 22 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中获取远程客户端的真实ip地址的方法
2011/08/03 PHP
phpexcel导出excel的颜色和网页中的颜色显示不一致
2012/12/11 PHP
php导入导出excel实例
2013/10/25 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
JS中的作用域链
2017/03/01 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
js获取一组日期中最近连续的天数
2017/05/25 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[03:21]辉夜杯主赛事 12月25日TOP5
2015/12/26 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python生成随机MAC地址
2015/03/10 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
Python实现基于SVM的分类器的方法
2019/07/19 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
使用Numpy对特征中的异常值进行替换及条件替换方式
2020/06/08 Python
Python pip使用超时问题解决方案
2020/08/03 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
国际会议邀请函范文
2014/01/16 职场文书
公务员平时考核实施方案
2014/03/11 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
纪念九一八事变演讲稿:青少年应树立远大理想
2014/09/14 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
领导视察通讯稿
2015/07/18 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
新教师教学工作总结
2015/08/14 职场文书
python基础之停用词过滤详解
2021/04/21 Python
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL