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 相关文章推荐
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
jquery 弹出层注册页面等(asp.net后台)
Jun 17 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
动态Axios的配置步骤详解
Jan 12 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
JS算法教程之字符串去重与字符串反转
Dec 15 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
总集篇&特番节目先行播出!《SAO Alicization War of Underworld》第2季度TV动画4月25日放送!
2020/03/06 日漫
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
一个JQuery操作Table的代码分享
2012/03/30 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
在浏览器中实现图片粘贴的jQuery插件-- pasteimg使用指南
2014/12/29 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
原生JavaScript实现滚动条效果
2020/03/24 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
中东奢侈品市场:Coveti
2019/05/12 全球购物
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
车辆年检委托书范本
2014/10/14 职场文书
个人查摆剖析材料
2014/10/16 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
手机销售员岗位职责
2015/04/11 职场文书
公司聚餐通知
2015/04/22 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python