Menu

30天學會 MooTools 教學(9): 輸入過濾-字符串

今天我們來看一看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);
}

 

在今天結束之前，有一個很小的提示，如果你在一個字符串上調用substitute方法，並且不為要替換的關鍵字提供一個鍵/值對（key /value pair）對象，那麼它將只是簡單地刪除掉花括號裡面的內容。因此，如果你需要保留花括號裡面的字符串，請注意不要使用這個方法。舉個例子，如下： 

("{one} some stuff {two} some more stuff").substitute({one : 'substitution text'});

這將返回「substitution text some stuff some more stuff」。

更多學習

下載一個包含你開始所需要的zip包

 

 

Mootools 教學列表：