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实现标签页效果(配合css)
Apr 03 Javascript
javascript学习笔记(八)正则表达式
Oct 08 Javascript
JavaScript中的函数模式详解
Feb 11 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
jquery表单提交带错误信息提示效果
Mar 09 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
Vue2.0 http请求以及loading展示实例
Mar 06 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
JS实现简单的顶部定时关闭层效果
2014/06/15 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
Koa2微信公众号开发之消息管理
2018/05/16 Javascript
JS实现的合并两个有序链表算法示例
2019/02/25 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
[35:39]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第二场 11.22
2020/11/24 DOTA
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
Python中map,reduce,filter和sorted函数的使用方法
2015/08/17 Python
Python实现删除列表中满足一定条件的元素示例
2017/06/12 Python
Python xlwt设置excel单元格字体及格式
2020/04/18 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
python适合人工智能的理由和优势
2019/06/28 Python
Matplotlib中%matplotlib inline如何使用
2020/07/28 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
新年联欢会主持词
2014/03/27 职场文书
成立公司计划书
2014/05/07 职场文书
美化环境标语
2014/06/20 职场文书
运动会新闻稿
2015/07/17 职场文书
服装店员工管理制度
2015/08/07 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书