Mootools 1.2教程 输入过滤第二部分(字符串)_Mootools

我们会在以后另外用一讲来将一下正则表达式的基本知识和在MooTools下的使用。
在开始之前,我想先花一点时间来看一下字符串函数是怎么调用的。在我的例子中,我是在字符串变量上面直接调用这个方法的,就像下面的这样:
参考代码:

复制代码 代码如下:

var my_text_variable = "Heres some text";
// 结果 字符串变量 方法名
var result_of_function = my_text_variable.someStringFunction();

但是我这样写只是为了能够更清楚地解释它,你应该了解到这些字符串函数也可以直接在字符串上调用,而不需要声明一个变量,就像这样:
参考代码:
复制代码 代码如下:

var result_of_function = "Heres some text".someStringFunction();

注意一下,这个方式在MooTools中的数字处理函数也同样有效:
参考代码:
复制代码 代码如下:

// 注意一下用法,是括号中的数字
// 而不是单引号引起来的字符串
var limited_number = (256).limit(1, 100);

还有,我想再次强调一遍:用JavaScript对输入过滤并不能在数据发送到服务器之前对其进行安全过滤。你在JavaScript中写的所有的一切都可以被你的网页浏览者看到、操控和禁止。我们将在以后讲MooTools的Request类时,对PHP的过滤技术进行一些简单的探讨。同时,继续保持原来要在服务器端做的任何与安全相关的事情,不要依赖JavaScript。
trim()
trim函数提供了一个简单直接的方式来去掉任何你想处理的字符串两端的空白字符。
参考代码:

复制代码 代码如下:

// 这是我们要trim的字符串
var text_to_trim = " \nString With Whitespace ";
// trim后的字符串是"String With Whitespace"
var trimmed_text = text_to_trim.trim();

如果你还没有见过\n,其实这只是一个换行符而已。你可以在一个字符串中使用它来把字符串分割成多行。trim方法把换行符也当作一个空白符,因此它也会把换行符去掉。trim方法唯一不做的一件特别的事情就是:它并不会去掉一个字符串里面的任何多余的空白字符。下面的这个例子展示了trim是怎样处理字符串里面的换行符的:
参考代码:
复制代码 代码如下:

var trimDemo = function(){
// 设置我们要修剪的字符串
var text_to_trim = ' \ntoo much whitespace\n ';
// 对其进行修剪
var trimmed_text = text_to_trim.trim();
// 显示结果
alert('Before Trimming : \n' +
'|-' + text_to_trim + '-|\n\n' +
'After Trimming : \n' +
'|-' + trimmed_text + '-|');
}

clean()
为了更有意义,你也许不需要去掉一个字符串里的所有空白符。幸运的是,对于那些你觉得坚强的空白字符,MooTools慷慨地为你提供了clean()方法。
参考代码:

复制代码 代码如下:

// 这是我们要修剪的字符串
var text_to_clean = " \nString \nWith Lots \n \n More \nWhitespace \n ";
// clean以后的字符串是"String With Lots More Whitespace"
var cleaned_text = text_to_trim.clean();

clean()方法与trim()方法有一点很大的不同。它把你传入的字符里面的空格全部提取出来,而不只是头部和尾部的空白字符。它们意味着字符串中的任何多于一个的空白字符和任何换行符和制表符(tab)。对比一下修剪的结果,我们看看到底是什么意思:
参考代码:

复制代码 代码如下:

var cleanDemo = function(){
// 设置我们要修剪的字符串
var text_to_clean = ' too\n much\n whitespace ';
// clean该字符串
var cleaned_text = text_to_clean.clean();
// 显示结果
alert('Before Cleaning : \n' +
'|-' + text_to_clean + '-|\n\n' +
'After Cleaning : \n' +
'|-' + cleaned_text + '-|');
}

contains()
和trim()以及clean()方法类似,contains()方法做一件很简单的事情,没有任何其他的花架子。它检查一个字符串去看它是否包含一个你要查找的字符串,如果找到了要查找的字符串就返回true,如果没有找到就返回false。
参考代码:

复制代码 代码如下:

// 我们要在这个字符串里面查找
var string_to_match = "Does this contain thing work?";
// 找'contain', did_string match为true
var did_string_match = string_to_match.contains('contain');
// 找'propane', did_string_match为 false
did_string_match = string_to_match.contains('propane');

这个方法可以在各种情况下派上用场,当你和其他工具,如我们在第三讲中讲到的Array.each()函数配合使用时,你可以用相对较少的代码来完成一些稍微复杂的任务。举个例子,如果我们把一系列单词放进一个数组,然后一个一个地遍历,我们可以用较少的代码在一个文本的相同区域中寻找多个单词:
参考代码:

复制代码 代码如下:

string_to_match = "string containing whatever words you want to try to match";
word_array = ['words', 'to', 'match'];
// 把数组中的每一个单词作为变量传进去
word_array.each(function(word_to_match){
// 寻找当前的单词
if (string_to_match.contains(word_to_match)){
alert('found ' + word_to_match);
};
});

我们把它放进一个textbox中,加一点想象,你就可以拥有你自己的脏词(或者其他任何)检测器。
参考代码:

复制代码 代码如下:

var containsDemo = function(){
// 把我们要禁止的词放进一个数组
var banned_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat'];
// 获得文本域中的内容
var textarea_input = $('textarea_1').get('value');
// 枚举过滤词中的每一个词
banned_words.each(function(banned_word){
// 在文本域内容中查找当前的过滤词
if (textarea_input.contains(banned_word)){
// 告诉用户不能使用那个单词
alert(banned_word + ' is not allowed');
};
});
}

substitute()
substitute()是一个非常强大的工具。我们今天只是讲一下一些关于它的基本知识,substitute的更多强大的功能来自于它的正则表达式的使用,我们会在后面稍微讲一下。然而,仅仅使用这些基本功能你就可以做很多事情了。
参考代码:

复制代码 代码如下:

// 这是要使用substitute方法的文本模板
// 注意,要替代的部分都是用花括号括起来的部分
var text_for_substitute = "One is {one}, Two {two}, Three is {three}.";
// 这个对象包含了要替换的规则
// 没有用引号引起来的部分是搜索项
// 用引号引起来的部分是用来替换搜索项的句子
var substitution_object = {
one : 'the first variable',
two : 'always comes second',
three : 'getting sick of bronze..'
};
// 在text_for_substitute上调用substitute方法
// 把substitution_object作为参数传入
// 把替换结果赋值给变量new_string
var new_string = text_for_substitute.substitute(substitution_object);
// new_string现在的值为"One is the first variable, Two always comes second, Three is getting sick of bronze..."

事实上你并不需要创建一个substitution_object对象来使用substitute方法,如果你觉得它不合适的话,下面的方法也同样可以实现:
参考代码:

复制代码 代码如下:

// 建立要替换的字符串
var text_for_substitute = "{substitute_key} and the original text";
// 把要替换的对象作为参数传给substitute方法
var result_text = text_for_substitute.substitute({substitute_key : 'substitute_value'});
// result_text现在就是"substitute_value and the original text"

你可以通过这个方法做得更多更深入一点,你可以用从一个DOM对象中获得值的函数调用来作为替换项的值,这也是可以的。
参考代码:

复制代码 代码如下:

var substituteDemo = function(){
// 从textfield中获得原始的 文本
var original_text = $('substitute_span').get('html');
// 用文本框中的值替换textfield中的值
var new_text = original_text.substitute({
first : $('first_value').get('value'),
second : $('second_value').get('value'),
third : $('third_value').get('value'),
});
// 用新的文本替换span中的内容
$('substitute_span').set('html', new_text);
// 禁用substitute按钮
// 并启用reset按钮
$('simple_substitute').set('disabled', true);
$('simple_sub_reset').set('disabled', false);
}
var substituteReset = function(){
// 创建一个变量来保存原有的文本
var original_text = "|- {first} -- {second} -- {third} -|";
// 用原有的文本来替换span中的内容
$('substitute_span').set('html', original_text);
// 禁用reset按钮
// 并启用substitute
$('simple_sub_reset').set('disabled', true);
$('simple_substitute').set('disabled', false);
}

|- {first} -- {second} -- {third} -|
first_value
second_value
third_value
在今天结束之前,有一个很小的提示,如果你在一个字符串上调用substitute方法,并且不为要替换的关键字提供一个键/值对(key/value pair)对象,那么它将只是简单地删除掉花括号里面的内容。因此,如果你需要保留花括号里面的字符串,请注意不要使用这个方法。举个例子,如下:
参考代码:

复制代码 代码如下:

("{one} some stuff {two} some more stuff").substitute({one : 'substitution text'});

这将返回“substitution text some stuff some more stuff”。

更多学习

下载一个包含你开始所需要的zip包

  • String上的怪异模式(this guy is amazing)
  • JavaScript字符串函数参考
  • MooTools字符串文档
时间: 2024-09-24 21:05:45

Mootools 1.2教程 输入过滤第二部分(字符串)_Mootools的相关文章

Mootools 1.2教程 输入过滤第一部分(数字)_Mootools

注意:JavaScript中的输入过滤只是为了保证(客户端)代码顺利执行,并不能替代服务器端的字符串过滤来保护你的应用程序不被注入攻击. 在第四讲的最后的一个例子中,我们从文本输入框获取RGB值,然后使用它们来改变页面背景色,今天我们首先来看看那个例子的部分代码,并以此展开我们这一讲. rgbToHex() 从技术上讲,rgbToHex()方法实际上是属于Array集合的.由于它是一个来处理数字的数组方法,我们今天来学习一下这个方法.从功能上来讲,rgbToHex()使用起 来很简单: 参考代码

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教程(21)——类(二)_Mootools

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

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

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

Mootools 1.2教程 滑动效果(Slide)_Mootools

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

Mootools 1.2教程 正则表达式_Mootools

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

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

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

Mootools 1.2教程 事件处理_Mootools

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