We will use another explanation to explain the basic knowledge of regular expressions and the use of them under MooTools.
Before I start, I want to take a moment to see how string functions are called. In my example, I called this method directly on top of a string variable, like the following:
Reference code:
var my_text_variable = "Heres some text";
// Result String variable Method name
var result_of_function = my_text_variable.someStringFunction();
But I just write 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:
var result_of_function = "Heres some text".someStringFunction();
Note that this method is also effective in the number processing functions in MooTools:
Reference code:
// Pay attention to the usage, it is the number in brackets
// instead of strings enclosed by single quotes
var limited_number = (256).limit(1, 100);
Also, I want to emphasize again: filtering inputs with JavaScript cannot safely filter data before it is sent to the server. Everything you write in JavaScript can be seen, manipulated and banned by your web viewers. We will briefly discuss PHP filtering technology when talking about MooTools' Request class in the future. Meanwhile, continue to keep any security-related things you originally wanted to do on the server side and don't rely on JavaScript.
trim()
The trim function provides a simple and straightforward way to remove any whitespace characters at both ends of a string you want to process.
Reference code:
// This is the string we want to trim
var text_to_trim = " \nString With Whitespace ";
// The string after trim is "String With Whitespace"
var trimmed_text = text_to_trim.trim();
If you haven't seen \n, it's actually just a newline character. You can use it in a string to split the string into multiple lines. The trim method also treats newlines as a whitespace, so it also removes newlines. The only special thing that the trim method does not do is that it does not remove any extra whitespace characters in a string. The following example shows how trim handles newlines in strings:
Reference code:
var trimDemo = function(){
// Set the string we want to trim
var text_to_trim = ' \ntoo much whitespace\n ';
// Trim it
var trimmed_text = text_to_trim.trim();
// Show results
alert('Before Trimming : \n' +
'|-' + text_to_trim + '-|\n\n' +
'After Trimming : \n' +
'|-' + trimmed_text + '-|');
}
clean()
To make more sense, you may not need to remove all the whitespace characters in a string. Fortunately, for those whitespace characters you feel strong, MooTools generously provides you with a clean() method.
Reference code:
// This is the string we want to trim
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 a little different from the trim() method. It extracts all the spaces in the characters you pass in, not just the whitespace characters at the head and tail. They mean any more than one whitespace character in the string and any newline and tab character (tab). Comparing the trimming results, we see what it means:
Reference code:
var cleanDemo = function(){
// Set the string we want to trim
var text_to_clean = ' too\n much\n whitespace ';
// clean this string
var cleaned_text = text_to_clean.clean();
// Show results
alert('Before Cleaning : \n' +
'|-' + text_to_clean + '-|\n\n' +
'After Cleaning : \n' +
'|-' + cleaned_text + '-|');
}
contains()
Similar to the trim() and clean() methods, the contains() method does a very simple thing without any other fancy. It checks a string to see if it contains a string you are looking for. If the string you are looking for is found, it returns true, and if it is not found, it returns false.
Reference code:
// We want to search in this 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, and when you use it with other tools, such as the() function we mentioned in Lecture 3, you can use relatively little code to complete some slightly complex tasks. For example, if we put a series of words into an array and iterate through them one by one, we can look for multiple words in the same area of a text with less code:
Reference code:
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);
};
});
Let's put it into a textbox, add a little imagination and you can have your own dirty word (or whatever) detector.
Reference code:
var containsDemo = function(){
// Put the words we want to forbidden into an array
var banned_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat'];
// Get content in the text field
var textarea_input = $('textarea_1').get('value');
// Enumerate every word in the filter word
banned_words.each(function(banned_word){
// Find the current filter word in text field 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 talking about some basic knowledge about it. More powerful functions of substitute come from the use of regular expressions, which we will talk about later. However, you can do a lot with just these basic functions.
Reference code:
// This is the text template to use the substitute method
// Note that the parts to be replaced are the parts enclosed in curly braces
var text_for_substitute = "One is {one}, Two {two}, Three is {three}.";
// This object contains the rules to be replaced
// The part that is not enclosed in quotation marks is the search term
// The part enclosed in quotation marks is used to replace the search terms
var substitution_object = {
one : 'the first variable',
two : 'always comes second',
three : 'getting sick of bronze..'
};
// Call substitute method on text_for_substitute
// Pass the substitution_object as a parameter
// Assign the replacement 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 need to create a substitution_object object to use the substitute method. If you think it is inappropriate, the following method can also be implemented:
Reference code:
// Create the string to be replaced
var text_for_substitute = "{substitute_key} and the original text";
// Pass the object to be replaced 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 do more and more in-depth with this method, and you can use a function call that gets the value from a DOM object as the value of the replacement item, which is also OK.
Reference code:
var substituteDemo = function(){
// Get the original text from the textfield
var original_text = $('substitute_span').get('html');
// Replace the value in 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 content in span with new text
$('substitute_span').set('html', new_text);
// Disable 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 the span with the original text
$('substitute_span').set('html', original_text);
// Disable the 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
Before today ends, there is a small tip that if you call the substitute method on a string and do not provide a key/value pair object for the keyword you want to replace, it will simply remove the contents inside the curly braces. Therefore, if you need to keep the strings inside curly braces, be careful not to use this method. For example, as follows:
Reference code:
("{one} some stuff {two} some more stuff").substitute({one : 'substitution text'});
This will return "substitution text some stuff some more stuff".
Before I start, I want to take a moment to see how string functions are called. In my example, I called this method directly on top of a string variable, like the following:
Reference code:
Copy the codeThe 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 just write 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 the codeThe code is as follows:
var result_of_function = "Heres some text".someStringFunction();
Note that this method is also effective in the number processing functions in MooTools:
Reference code:
Copy the codeThe code is as follows:
// Pay attention to the usage, it is the number in brackets
// instead of strings enclosed by single quotes
var limited_number = (256).limit(1, 100);
Also, I want to emphasize again: filtering inputs with JavaScript cannot safely filter data before it is sent to the server. Everything you write in JavaScript can be seen, manipulated and banned by your web viewers. We will briefly discuss PHP filtering technology when talking about MooTools' Request class in the future. Meanwhile, continue to keep any security-related things you originally wanted to do on the server side and don't rely on JavaScript.
trim()
The trim function provides a simple and straightforward way to remove any whitespace characters at both ends of a string you want to process.
Reference code:
Copy the codeThe code is as follows:
// This is the string we want to trim
var text_to_trim = " \nString With Whitespace ";
// The string after trim is "String With Whitespace"
var trimmed_text = text_to_trim.trim();
If you haven't seen \n, it's actually just a newline character. You can use it in a string to split the string into multiple lines. The trim method also treats newlines as a whitespace, so it also removes newlines. The only special thing that the trim method does not do is that it does not remove any extra whitespace characters in a string. The following example shows how trim handles newlines in strings:
Reference code:
Copy the codeThe code is as follows:
var trimDemo = function(){
// Set the string we want to trim
var text_to_trim = ' \ntoo much whitespace\n ';
// Trim it
var trimmed_text = text_to_trim.trim();
// Show results
alert('Before Trimming : \n' +
'|-' + text_to_trim + '-|\n\n' +
'After Trimming : \n' +
'|-' + trimmed_text + '-|');
}
clean()
To make more sense, you may not need to remove all the whitespace characters in a string. Fortunately, for those whitespace characters you feel strong, MooTools generously provides you with a clean() method.
Reference code:
Copy the codeThe code is as follows:
// This is the string we want to trim
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 a little different from the trim() method. It extracts all the spaces in the characters you pass in, not just the whitespace characters at the head and tail. They mean any more than one whitespace character in the string and any newline and tab character (tab). Comparing the trimming results, we see what it means:
Reference code:
Copy the codeThe code is as follows:
var cleanDemo = function(){
// Set the string we want to trim
var text_to_clean = ' too\n much\n whitespace ';
// clean this string
var cleaned_text = text_to_clean.clean();
// Show results
alert('Before Cleaning : \n' +
'|-' + text_to_clean + '-|\n\n' +
'After Cleaning : \n' +
'|-' + cleaned_text + '-|');
}
contains()
Similar to the trim() and clean() methods, the contains() method does a very simple thing without any other fancy. It checks a string to see if it contains a string you are looking for. If the string you are looking for is found, it returns true, and if it is not found, it returns false.
Reference code:
Copy the codeThe code is as follows:
// We want to search in this 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, and when you use it with other tools, such as the() function we mentioned in Lecture 3, you can use relatively little code to complete some slightly complex tasks. For example, if we put a series of words into an array and iterate through them one by one, we can look for multiple words in the same area of a text with less code:
Reference code:
Copy the codeThe 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);
};
});
Let's put it into a textbox, add a little imagination and you can have your own dirty word (or whatever) detector.
Reference code:
Copy the codeThe code is as follows:
var containsDemo = function(){
// Put the words we want to forbidden into an array
var banned_words = ['drat', 'goshdarn', 'fiddlesticks', 'kumquat'];
// Get content in the text field
var textarea_input = $('textarea_1').get('value');
// Enumerate every word in the filter word
banned_words.each(function(banned_word){
// Find the current filter word in text field 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 talking about some basic knowledge about it. More powerful functions of substitute come from the use of regular expressions, which we will talk about later. However, you can do a lot with just these basic functions.
Reference code:
Copy the codeThe code is as follows:
// This is the text template to use the substitute method
// Note that the parts to be replaced are the parts enclosed in curly braces
var text_for_substitute = "One is {one}, Two {two}, Three is {three}.";
// This object contains the rules to be replaced
// The part that is not enclosed in quotation marks is the search term
// The part enclosed in quotation marks is used to replace the search terms
var substitution_object = {
one : 'the first variable',
two : 'always comes second',
three : 'getting sick of bronze..'
};
// Call substitute method on text_for_substitute
// Pass the substitution_object as a parameter
// Assign the replacement 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 need to create a substitution_object object to use the substitute method. If you think it is inappropriate, the following method can also be implemented:
Reference code:
Copy the codeThe code is as follows:
// Create the string to be replaced
var text_for_substitute = "{substitute_key} and the original text";
// Pass the object to be replaced 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 do more and more in-depth with this method, and you can use a function call that gets the value from a DOM object as the value of the replacement item, which is also OK.
Reference code:
Copy the codeThe 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 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 content in span with new text
$('substitute_span').set('html', new_text);
// Disable 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 the span with the original text
$('substitute_span').set('html', original_text);
// Disable the 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
Before today ends, there is a small tip that if you call the substitute method on a string and do not provide a key/value pair object for the keyword you want to replace, it will simply remove the contents inside the curly braces. Therefore, if you need to keep the strings inside curly braces, be careful not to use this method. For example, as follows:
Reference code:
Copy the codeThe 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".
More learning
Download a zip package that contains the required zip you need to start
- Weird mode on String（this guy is amazing）
- JavaScript string function reference
- MooTools string documentation