Mootools 1.2教程 正则表达式_Mootools

如果你还不熟悉怎么使用正则表达式(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()函数的文档。

时间: 2024-10-24 01:21:42

Mootools 1.2教程 正则表达式_Mootools的相关文章

Mootools 1.2教程 事件处理_Mootools

今天我们开始第五讲,在上一讲(<Mootools 1.2教程(4)--函数>)中,我们学习了在MooTools 1.2中建立和使用函数的几种不同方式.下一步就是理解事件了.和选择器类似,事件也是建立互动界面的一个重要部分.一旦你掌握了一个元素,你需要去决定什么行为来触发什么效果.先把效果留着以后在讲,我们首先看一看中间步骤和一些常见的事件. 左键单击事件 左键单击事件是web开发中最常见的事件.超链接识别点击事件,然后把你带到另外一个URL地址.MooTools能够识别其他DOM元素上的点击事

Mootools 1.2教程(2) DOM选择器_Mootools

如果你还没有准备好,请先阅读上一篇<Mootools 1.2教程(1)--MooTools介绍>.我们讲了怎么引用MooTools 1.2以及怎么在domready里面调用你的脚本. 今天开始本系列教程的第2讲.在这一讲中,我们会学习几种选择HTML元素的方法.在许多方面,这是MooTools用得最多最基本的.毕竟,要创建一个基于HTML元素的交互性用户体验,你必须首先把它们掌握在手中. 基本的方法 $(); $函数是MooTools中基本的选择器.你可以通过它来根据一个ID选择DOM元素.

JS基础教程——正则表达式示例(推荐)

正则表达式的() [] {}有不同的意思. () 是为了提取匹配的字符串.表达式中有几个()就有几个相应的匹配字符串. (\s*)表示连续空格的字符串. []是定义匹配的字符范围.比如 [a-zA-Z0-9] 表示相应位置的字符要匹配英文字符和数字.[\s*]表示空格或者*号. {}一般用来表示匹配的长度,比如 \s{3} 表示匹配三个空格,\s[1,3]表示匹配一到三个空格. (0-9) 匹配 '0-9′ 本身. [0-9]* 匹配数字(注意后面有 *,可以为空)[0-9]+ 匹配数字(注意后

Mootools 1.2教程(3) 数组使用简介_Mootools

今天,我们在来看看如何使用数组来管理DOM元素.基本方法 .each(); 在处理数组时,.each();方法是你最好的朋友.它提供了一种很容易的方法来遍历数组的每个元素,如果有需要还可以对其中的元素进行任何逻辑处理.例如,我们可以假设你需要为页面中的每个div对象调用alert方法: 参考代码: 复制代码 代码如下: $$('div').each(function() { alert('a div'); }); 如果使用下面的HTML代码,上面的JavaScript代码将弹出两个alert对话

Mootools 1.2教程 设置和获取样式表属性_Mootools

欢迎开始这一系列的教程的第七讲.今天,我们来看一下如何通过MooTools 1.2和我们以前几讲中的内容来操作样式,这将给你在UI上带来很大的控制权.处理样式非常简单,不过今天我们要做一些调整.例如,我们要介绍键值对(key-value pair)对象.我们也会讲到在domready之外来传递变量,就像我们在关于函数的那一讲中学到的一样.从这里开始,我们会开始慢慢提高难度,介绍一些必要的编程概念.如果你是JavaScript新手或者第一次开始学MooTools,请确保你在明白了前面的教程,你可以

Mootools 1.2教程 排序类和方法简介_Mootools

Sortables类还提供了包括一个名叫"serialize"的优秀方法,通过这个方法你额可以把这些元素的id作为数组输出--对于服务器端的开发非常有用.接下来,我们看看如何创建一个新的排序项集合,还有一定要看一下最后的演示实例. 基本知识 创建一个新的Sortable对象 首先,我们要把我们要排序的元素赋值给变量.对于Sortables来说,如果你想要多个列表之间的元素能够在相互之间拖拽,你需要把这些元素全部都放在一个数组中,就像这样: 参考代码: 复制代码 代码如下: var so

Mootools 1.2教程 定时器和哈希简介_Mootools

定时器能比它表面看起来做更多的事情--定时能定期地触发一个函数.另一方面,hash则是键值对(key/value)的集合.如果你对hash还不熟悉现在也不要着急--我们今天就会做一个快速简要的介绍,并且会提供一些延伸阅读的相关链接.就像MooTools中的所有东西一样,一旦你看到它的正确用法,它使用起来就非常的简单,并且不可思议的有用. .periodical()函数 基本用法 使用这个方法你唯一要做的就是在一个函数的结尾添加.periodical();,那样你的函数就会定时地触发.和以前的一样

Mootools 1.2教程 同时进行多个形变动画_Mootools

这在你给多个元素添加有相同选项的形变动画时非常有用.就像我们在第20讲中看到的最后一个例子一样. 基本用法 使用Fx.Elements的方法看起来和Fx.Morph差不多.这两者之间的区别在于.start({})方法和.set({})方法. 为了保证事情简洁,让我们首先建立一个元素数组,以用来传递给Fx.Elements. 参考代码: [复制代码] [保存代码] var fxElementsArray = $$('.myElementClass'); 现在我们就可以把我们的数组传递给Fx.Ele

Mootools 1.2教程 选项卡效果(Tabs)_Mootools

简单的"额外信息"标签(TAB) 鼠标移上去显示内容的TAB 在这第一个项目中,我们要创建一个简单的菜单,当鼠标移动到这些菜单上时显示相应的内容.首先,我们来完成HTML代码--我们就用包含四个列表项的ul好了,然后再创建四个div(每一个div对应一个列表项): 参考代码: 复制代码 代码如下: // 这里是我们的菜单 <ul id="tabs"> <li id="one">One</li> <li i