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

原文地址：30 Days of Mootools 1.2 Tutorials – Day 9 – Input Filtering Part II (Strings)

输入过滤第二部分（字符串）

请尊重个人劳动，转载请注明出处：http://fdream.net，译者：Fdream

字符串函数

如果你还没有准备好开始这一讲，请参考这一系列的教程，这里是《MooTools 1.2系列教程目录》。

今天我们来看一看MooTools给我们提供的额外的一些处理字符函数。这只是MooTools字符串处理中的一部分，并不包含一些神秘的函数（比如toCamelCase()）和使用正则表达式处理字符串的函数。我们会在以后另外用一讲来将一下正则表达式的基本知识和在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”。