Mootools 1.2 Tutorial Input Filtering Part 2 (String)

We will use another lecture in the future to cover the basic knowledge of regular expressions and their use under MooTools.
Before starting, I would like to take a moment to look at how string functions are called. In my case, I called this method directly on the string variable, like this:
Reference code:

Copy code The code is as follows:

 
var my_text_variable = "Heres some text"; 
// Result string variable method name
var result_of_function = my_text_variable.someStringFunction() ; 

But I wrote it like this just to be able to explain it more clearly, you should understand that these string functions can also be called directly on strings without declaring a variable, like this :
Reference code:

Copy code The code is as follows:

var result_of_function = "Heres some text" .someStringFunction();

Note that this method is also valid for number processing functions in MooTools:
Reference code:

Copy code The code is as follows:

 
// Note the usage, it is the number in brackets 
// rather than the string enclosed in single quotes 
var limited_number = (256).limit(1, 100); 

Also, I want to stress this again: filtering input with JavaScript does not securely filter the data before it is sent to the server. Everything you write in JavaScript can be seen, manipulated, and disabled by your web viewers. We will conduct some brief discussions on PHP filtering technology when we talk about the Request class of MooTools in the future. In the meantime, keep doing anything security-related on the server side and don't rely on JavaScript.
trim() The
trim function provides a simple and straightforward way to remove whitespace characters from both ends of any string you want to process.
Reference code:

Copy code The code is as follows:

 
// This is what we want trimmed string 
var text_to_trim = " nString With Whitespace "; 
 // The trimmed string is "String With Whitespace" 
var trimmed_text = text_to_trim.trim(); 

If you haven’t seen n, it’s just a newline character. You can use this within a string to split the string into multiple lines. The trim method treats the newline character as a whitespace character, so it will also remove the newline character. The only special thing the trim method doesn't do is that it doesn't remove any extra whitespace characters from a string. The following example shows how trim handles newlines in strings:
Reference code:

Copy code The code is as follows:

 
var trimDemo = function(){ 
// Set the string we want to trim 
var text_to_trim = ' ntoo much whitespacen '; 
// Trim it
var trimmed_text = text_to_trim.trim(); 
// Display results
alert('Before Trimming : n' 
'|-' text_to_trim '-|nn' 
'After Trimming : n ' 
'|-' trimmed_text '-|'); 
} 

clean()
To make more sense, you may not need to remove a string all whitespace characters in it. Fortunately, for those whitespace characters you feel strong about, MooTools generously provides you with the clean() method.
Reference code:

Copy code The code is as follows:

 
// This is what we want Trimmed string 
var text_to_clean = " nString nWith Lots n n More nWhitespace n "; 
// The string after clean is "String With Lots More Whitespace" 
var cleaned_text = text_to_trim.clean(); 

The clean() method is slightly different from the trim() method. It extracts all the spaces in the characters you pass in, not just the leading and trailing whitespace characters. They mean any more than one whitespace character and any newlines and tabs in the string. Compare the results of pruning and see what it means:
Reference code:

Copy code The code is as follows:

 
var cleanDemo = function(){ 
// Set the string we want to trim 
var text_to_clean = ' toon muchn whitespace '; 
// Clean the string 
var cleaned_text = text_to_clean.clean(); 
// Display results
alert('Before Cleaning : n' 
'|-' text_to_clean '-|nn' 
'After Cleaning : n' 
'|-' cleaned_text '-|'); 
} 

contains()
Similar to the trim() and clean() methods, contains() The method does a very simple thing without any other bells and whistles. It checks a string to see if it contains the string you are looking for, returning true if the string you are looking for is found, and false if it is not found.
Reference code:

Copy code The code is as follows:

 
// We want to use this Find in the string 
var string_to_match = "Does this contain thing work?"; 
// Find 'contain', did_string match is true 
var did_string_match = string_to_match.contains('contain'); 
// Find 'propane', did_string_match is false 
did_string_match = string_to_match.contains('propane'); 

This method can come in handy in various situations, when you and other When used together with tools, such as the Array.each() function we talked about in Lecture 3, you can complete some slightly complex tasks with relatively little code. For example, if we put a series of words into an array and then iterate through them one by one, we can find multiple words in the same area of a text with less code:
Reference code:

Copy code The code is as follows:

 
string_to_match = "string containing whatever words you want to try to match"; 
word_array = ['words', 'to', 'match']; 
// Pass each word in the array as a variable 
word_array.each(function(word_to_match){ 
/ / Find the current word 
if (string_to_match.contains(word_to_match)){ 
alert('found ' word_to_match); 
}; 
}); 

us Put it into a textbox, add a little imagination, and you can have your own dirty word (or anything else) detector.
Reference code:

Copy code The code is as follows:

 
var containsDemo = function() { 
// Put the words we want to ban into an array 
var banned_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat']; 
// Get the words in the text field Content
var textarea_input = $('textarea_1').get('value'); 
// Enumerate each word in the filter words
banned_words.each(function(banned_word){ 
 // Find the current filter word in the text area content 
if (textarea_input.contains(banned_word)){ 
// Tell the user that the word cannot be used 
alert(banned_word ' is not allowed'); 
}; 
}); 
} 

substitute()
substitute() is a very powerful tool. Today we are just going to talk about some basic knowledge about it. The more powerful functions of substitute come from its use of regular expressions, which we will talk about later. However, you can do a lot with just these basic features.
Reference code:

Copy code The code is as follows:

 
// This is the text template to use the substitute method 
// Note that the parts to be replaced are all enclosed in curly brackets 
var text_for_substitute = "One is {one}, Two {two}, Three is {three}."; 
// This object contains the rule to be replaced 
// The part not enclosed in quotation marks is the search term 
// Enclosed in quotation marks The part is the sentence used to replace the search term 
var substitution_object = { 
one : 'the first variable', 
two : 'always comes second', 
three : 'getting sick of bronze. .' 
}; 
// Call the substitute method on text_for_substitute 
// Pass substitution_object as a parameter 
// Assign the substitution result to the variable new_string 
var new_string = text_for_substitute.substitute (substitution_object); 
//The current value of new_string is "One is the first variable, Two always comes second, Three is getting sick of bronze..." 

In fact you don't You need to create a substitution_object object to use the substitute method. If you feel it is not suitable, the following method can also be implemented:
Reference code:

Copy code The code is as follows:

 
// Create the string to be replaced 
var text_for_substitute = "{substitute_key} and the original text"; 
// Put The object to be replaced is passed as a parameter to the substitute method 
var result_text = text_for_substitute.substitute({substitute_key : 'substitute_value'}); 
// result_text is now "substitute_value and the original text" 

You can go a little further with this method, you can use a function call that gets the value from a DOM object as the value of the replacement, which is also possible.
Reference code:

Copy code The code is as follows:

 
var substituteDemo = function() { 
// Get the original text from the textfield
var original_text = $('substitute_span').get('html'); 
// Replace the value in the textfield with the value in the text box
var new_text = original_text.substitute({ 
first : $('first_value').get('value'), 
second : $('second_value').get('value'), 
third : $('third_value').get('value'), 
}); 
// Replace the content in span with new text 
$('substitute_span').set(' html', new_text); 
// Disable the substitute button
// and enable the reset button
$('simple_substitute').set('disabled', true); 
$('simple_sub_reset' ).set('disabled', false); 
} 
var substituteReset = function(){ 
// Create a variable to save the original text 
var original_text = "|- {first } -- {second} -- {third} -|"; 
// Replace the content in span with the original text 
$('substitute_span').set('html', original_text); 
// Disable reset button 
// and enable substitute 
$('simple_sub_reset').set('disabled', true); 
$('simple_substitute').set('disabled' , false); 
} 

|- {first} -- {second} -- {third} -|
first_value
second_value
third_value
at Before we end today, a very small tip, if you call the substitute method on a string and do not provide a key/value pair object for the keyword to be replaced, then it will simply Delete the content inside the curly braces. Therefore, if you need to preserve the string inside the curly braces, please be careful not to use this method. For example, as follows:
Reference code:

Copy code The code is as follows:

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

This will return "substitution text some stuff some more stuff".

Learn more

Download a zip package containing what you need to get started

Weird pattern on String (this guy is amazing)
JavaScript String Function Reference
MooTools String Documentation

Mootools 1.2 Tutorial Input Filtering Part 2 (String)_Mootools

Learn more