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扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jquery自定义滚动条插件示例分享
Feb 21 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
7个有用的jQuery代码片段分享
May 19 Javascript
初步了解javascript面向对象
Nov 09 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
May 26 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
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的memory_limit限制的方法分享
2012/02/21 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
Javascript & DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
基于jQuery的让非HTML5浏览器支持placeholder属性的代码
2011/05/24 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
web网页按比例显示图片实现原理及js代码
2013/08/09 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
AngularJS入门教程引导程序
2016/08/18 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
2017/02/10 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
JQuery绑定事件四种实现方法解析
2020/12/02 jQuery
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
浅析Python的Django框架中的Memcached
2015/07/23 Python
Python连接MySQL并使用fetchall()方法过滤特殊字符
2016/03/13 Python
Python将一个Excel拆分为多个Excel
2018/11/07 Python
python xpath获取页面注释的方法
2019/01/14 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
python collections模块的使用
2020/10/16 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
面试后感谢信怎么写
2014/02/01 职场文书
捐书倡议书
2014/08/29 职场文书
现货白银电话营销话术
2015/05/29 职场文书
python_tkinter弹出对话框创建
2022/03/20 Python