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 相关文章推荐
jQuery之浮动窗口实现代码(两种方法)
Sep 08 Javascript
JavaScript html5 canvas绘制时钟效果
Mar 01 Javascript
Vue.js组件使用开发实例教程
Nov 01 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
Vue实现路由跳转和嵌套
Jun 20 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
详解vue.js之绑定class和style的示例代码
Aug 24 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
实例讲解React 组件生命周期
Jul 08 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生成WAP页面
2006/10/09 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
jquery 实现返回顶部功能
2014/11/17 Javascript
jQuery实现简单二级下拉菜单
2015/04/12 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
2016/12/07 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
使用python绘制常用的图表
2016/08/27 Python
python中的变量如何开辟内存
2018/06/26 Python
django 外键model的互相读取方法
2018/12/15 Python
python模块导入的方法
2019/10/24 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
html5视频常用API接口的实战示例
2020/03/20 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
如果NULL定义成#define NULL((char *)0)难道不就可以向函数传入不加转换的NULL了吗
2012/02/15 面试题
25道Java面试题集合
2013/05/21 面试题
中医专业职业生涯规划书范文
2014/01/04 职场文书
幼儿园安全责任书
2014/04/14 职场文书
观看信仰心得体会
2014/09/04 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
合作意向协议书
2015/01/29 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
教你nginx跳转配置的四种方式
2022/07/07 Servers