Mootools 1.2教程 正则表达式

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

赞 (0)

相关推荐

  • Mootools 1.2教程 正则表达式

    如果你还不熟悉怎么使用正则表达式(regular expression(regex)),我强烈建议你花一定量的时间好好看一下这篇文章中的一些链接,尤其是文章结尾"更多学习"部分的链接.我们今天只是讲一讲正则表达式最基本的用法,正则表达式能做的远远超过我们今天所讲的内容. 基本用法 test()方法 它的简单在于,一个正则表达式可以是一个你想要匹配的简单字符串.尽管JavaScript本身已经为RegExp对象提供了它自己的test()方法,MooTools的test()方法更好用一些,

  • Mootools 1.2教程 事件处理

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

  • Mootools 1.2教程 函数

    今天开始MooTools系列教程的第4讲.如果你还没有看过上一讲,请先查看上一篇教程<Mootools 1.2教程(3)--数组使用简介>.今天我们先不讲MooTools,而是讲一讲JavaScript中的函数(function)的基本知识. 但是,为了符合MooTools这个主题,你需要知道在哪里该使用MooTools的函数.此前,我们已经在我们的所有示例代码中,把代码都放在domready方法中.当我们需要把它放在domready的外面时,我们使用了函数(function).在你在domr

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

    如果你还没有准备好,请先阅读上一篇<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教程 滑动效果（Slide）

    基本用法 就像我们前面看过的所有类一样,我们在把这个类应用到一个元素上面时,我们要做的第一件事就是初始化一个新的Fx.Slide实例. 首先,让我们为滑动元素建立一个HTML文件. 参考代码: 复制代码 代码如下: <div id="slide_element" class="slide">这里是要滑动显示的内容.</div> 我们的CSS也不需要任何修饰. 参考代码: 复制代码 代码如下: .slide { margin: 20px 0;

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

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

  • Mootools 1.2教程(21)——类（二）

    Fdream注:原文好像少了一部分,因此我自作主张地补充了下面这一段及BaseClass的代码. 在今天的教程中,我们将主要学习一下MooTools中类的实现和继承(扩展).通过实现和继承,我们可以在子类中使用父类的方法,而不需要再重新声明和实现相同的方法.MooTools中的Class类可以帮助我们轻松地做到这一点.首先,我们定一个基类(base class). 参考代码: 复制代码 代码如下: var BaseClass = new Class({ // 定义一个方法testFunction

  • Mootools 1.2教程 选项卡效果（Tabs）

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

  • Mootools 1.2教程 类(一)

    简单地讲,一个类就是一个容器,这个容器包含了一些变量集合和操作这些变量的函数,以便实现特定的功能.在一个内容牵涉较多的项目中,类会显得难以置信的有用. 变量 在前面一系列的课程中,我们已经学习过了Hash对象中键值对(key/value pair)的使用方式,因此,下面的这个例子中创建了一个类,它只包含了一些变量,你看起来可能会觉得非常的熟悉: 参考代码: 复制代码 代码如下: // 创建一个名为class_one的类 // 包含两个内部变量 var Class_one = new Class(

随机推荐