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


Posted in Javascript onSeptember 15, 2009

我们会在以后另外用一讲来将一下正则表达式的基本知识和在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字符串文档
Javascript 相关文章推荐
比较简单实用的使用正则三种版本的js去空格处理方法
Nov 18 Javascript
JavaScript 选中文字并响应获取的实现代码
Aug 28 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
js计算精度问题小结
Apr 22 Javascript
javascript:void(0)的问题使用探讨
Apr 10 Javascript
jquery动态添加元素事件失效问题解决方法
May 23 Javascript
vue实现简单表格组件实例详解
Apr 16 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
AngularJS 仿微信图片手势缩放的实例
Sep 28 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
Java无向树分析 实现最小高度树
Apr 09 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 #Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 #Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 #Javascript
Mootools 1.2教程 事件处理
Sep 15 #Javascript
Mootools 1.2教程 函数
Sep 15 #Javascript
Mootools 1.2教程(3) 数组使用简介
Sep 14 #Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 #Javascript
You might like
php中使用临时表查询数据的一个例子
2013/02/03 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php按单词截取字符串的方法
2015/04/07 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
使用正则替换变量
2007/05/05 Javascript
为指定的元素添加遮罩层的示例代码
2014/01/15 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
2017/02/20 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
详解ES6实现类的私有变量的几种写法
2021/02/10 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
python实现按任意键继续执行程序
2016/12/30 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python查看数据类型的方法
2019/10/12 Python
HTML5触摸事件实现移动端简易进度条的实现方法
2018/05/04 HTML / CSS
Sasa莎莎海外旗舰店:香港莎莎美妆平台
2018/03/21 全球购物
美国在线奢侈品寄售商店:Luxury Garage Sale
2018/08/19 全球购物
政治思想表现评语
2014/05/04 职场文书
汉语专业毕业生自荐信
2014/07/06 职场文书
2014年度安全工作总结
2014/12/04 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript