If you are not familiar with how to use regular expressions (regex), I strongly recommend that you spend a certain amount of time taking a look at some links in this article, especially the links in the "More Learning" section at the end of the article. Today we are just talking about the most basic usage of regular expressions. Regular expressions can do far more than what we are talking about today.
Basic usage
test() method
Its simplicity is that a regular expression can be a simple string you want to match. Although JavaScript itself has provided its own test() method for RegExp objects, MooTools' test() method is better, and it is easier to use regular expressions in JavaScript.
For beginners, let's first look at the simplest usage of the test() method, looking for a specific string in a large string:
Reference code:
// We want to search in this string
var string_to_test = "Match anything in here";
// The regular expression we are looking for
var regular_expression = "anything";
// Apply regular expressions, return true or false
var result = string_to_test.test(regular_expression);
// result is now true
This is basically similar to the behavior of the contains() function, but contains is searched by the complete word, and the regular expression matches anywhere it appears. For example, in the following example, the contains() method will not return true, while the test() method will return true. (Fdream Note: This statement is incorrect as reminded by taoyu3781212. In fact, the contains() method can specify two parameters. The first parameter is the string to be searched, and the second is the delimited string. Only when the second parameter is specified, the contains() method will return false. This is actually the contains() method of array.)
Reference code:
var string_to_match = "anything else";
// Return true
string_to_match.contains('nything')
// Return false
string_to_match.contains('nything', ' ')
// Return true
string_to_match.contains('anything')
// Return true
string_to_match.test('nything');
Also note that unless you explicitly specify that the regex is case sensitive (case sensitive), so looking for "match" in a string containing "Match" will return false. You can try it in the following example:
Reference code:
var regex_demo = function(){
var test_string = $('regex_1_value').get('value');
var regex_value = $('regex_1_match').get('value');
var test_result = test_string.test(regex_value);
if(test_result){
$('regex_1_result').set('html', "matched");
}
else {
$('regex_1_result').set('html', "didn't match");
}
}
Note that there are some special characters in regular expressions that you need to use with caution. If you enter any of these characters into the following regular expression text box, an error will occur. At this time, you need to refresh this page to continue the following example.
- . * + ? ^ $ { } ( ) | [ ] / \
String to test:
Regular expressions
Ignore case
In many cases, you don't need to care about the case of the item you want to match. If you don't want a regular expression to be case sensitive, you can add a parameter "i" when calling the test() method:
Reference code:
// We want to search in this string
var string_to_test = "IgNorE CaSe";
// Return false
string_to_test.test("ignore");
// Return true
string_to_test.test("ignore", "i");
Technically, you can pass multiple parameters to the test() method, but since JavaScript now only supports 3 regular expression parameters (2 of which are enabled by default in the test() method), you may only use the parameter "i" during this period. You can continue to test the difference in case matching:
Reference code:
var regex_demo = function(){
// Get the string to test from the input text box
var test_string = $('regex_2_value').get('value');
// Get regular expression from the input text box
var regex_value = $('regex_2_match').get('value');
// If we need to ignore case
var regex_param = "";
if ($('regex_2_param').checked){
regex_param = "i";
}
// Run the test() method and get the result
var test_result = test_string.test(regex_value, regex_param);
// Update the result display area
if (test_result){
$('regex_2_result').set('html', "matched");
}
else {
$('regex_2_result').set('html', "didn't match");
}
}
String to test:
Regular expressions
Ignore case
Interesting things
Now that we have learned simple matching, we can start looking at some of the more impressive aspects of regular expressions. Everything that might be related to regular expressions is not covered here - we will pick some more direct and useful features.
Use ^ to start matching from string
The "^" operator of a regular expression allows you to match at the beginning of a string, regardless of whether there is a corresponding match after the character. Put it at the beginning of the regular expression you want to match, like this:
Reference code:
// The string we want to test
var string_to_test = "lets match at the beginning"
// Test whether this string starts with lets and returns true
var is_true = string_to_test.match("^lets");
As you expected, if the expression is not at the beginning of the string, this test will return false:
// The string we want to test
var string_to_test = "lets match at the beginning";
// Test whether this string starts with match and returns false
var is_false = string_to_test.match("^match");
Continue to test the following:
String to test:
Regular expressions
Ignore case
Use $ to match the end of the string
The function of the “$” operator is similar to that of the “^”, but there are two differences:
It matches the end of a string instead of the beginning
It is placed at the end of the regular expression instead of the beginning
Other than that, all its features are the same as you expect:
Reference code:
// The string we want to test
var string_to_test = "lets match at the end";
// Test whether this string ends with end and returns true
var is_true = string_to_test.match("end$");
// Test whether this string ends with the, return false
var is_false = string_to_test.match("the$");
By using these two operators in combination, you can do a very clean test: you can check if a string contains only the content of the expression you want to match without anything else.
Reference code:
// The string we want to test
var string_to_test = "lets match everything";
// Test whether this string is exactly the same as "lets match everything", return true
var is_true = string_to_test.match("^lets match everything$");
// Test whether this string is exactly the same as "lets everything", return false
var is_false = string_to_test.match("^lets everything$");
String to test:
Regular expressions
Ignore case
Character Set
Character sets are another regular expression tool that allows you to match multiple specific characters (A or Z) and a series of characters (A to Z). According to an example, if you want to test whether a string contains the word moo or boo, through the character set, you can place these two characters in square brackets [] of a regular expression to achieve it:
Reference code:
// Test the string for moo
var first_string_to_test = "cows go moo";
// Test the string for boo
var second_string_to_test = "ghosts go boo";
// This matches the first string and not the second string
var returns_true = first_string_to_test.test("moo");
var returns_false = second_string_to_test("moo");
// This matches the second string and not the first string
returns_false = first_string_to_test.test("boo");
returns_true = second_string_to_test.test("boo")
// This matches both the first and second strings
returns_true = first_string_to_test("[mb]oo");
returns_true = second_string_to_test("[mb]oo");
String one to test:
String two to test:
Regular expressions
Ignore case
To match a series of characters, you can take out the first character and the last character of the series of characters separately, and then connect them with a connector (-). You can define a series of numbers or characters in this way:
Reference code:
var string_to_test = " b or 3";
// Match a, b, c, or d, return true
string_to_test.test("[a-d]");
// Match 1, 2, 3, 4, or 5. Return true.
string_to_test.test("[1-5]");
If you want to match in multiple character sets, you can put your character set in a square bracket [] and separate it with the "|" operator.
Reference code:
var string_to_test = "b or 3";
// Match a to d or 1 to 5, return true
string_to_test.test([ [a-d] | [1-5] ]);
String one to test:
String two to test:
Regular expressions
Ignore case
escapeRegExp() method
When you see the method of creating regular expressions, you may find it very difficult to match some special characters. For example, what if you were looking for "[stuff-in-here]" or "$300" in a string? You can do this by manually adding ‘\’ to each special character you want to ignore.
Reference code:
// We want to match the string, note [,], - and $
var string_to_match = "[stuff-in-here] or $300";
// Incorrect matching method
string_to_match.test("[stuff-in-here]");
string_to_match.test("$300");
// Correct matching method
// Note the \ in front of [,], - and $
string_to_match.test("\[stuff\-in\-here\]");
string_to_match.test("\$300");
This is often the place to deal with regex headaches, especially when you are not fully familiar with them. For reference, special characters that need to be escaped in regular expressions include:
- . * + ? ^ $ { } ( ) | [ ] / \
Fortunately, MooTools provides escapeRegExp() function to ensure that your regular expressions are escaped correctly. This is another string function, so you just need to call this method on the regular expression string you want to match before you start searching.
Reference code:
// The string we want to escape
var unescaped_regex_string = "[stuff-in-here]";
// Escape this string
var escaped_regex_string = unescaped_regex_string.escapeRegExp();
// The escaped string is "\[stuff\-in\-here\]"
Note that this means that any special characters you want to use in regular expressions must be added after escape:
Reference code:
// strings that need to be escaped
var unescaped_regex_string = "[stuff-in-here]“;
// Escape this string and match from the beginning
var escaped_regex_string = “^” + unescaped_regex_string.escapeRegExp();
// escaped_regex_string is now "^\[stuff\-in\-here\]"
Continue to test the difference between using escapeRegExp() and not using it in the following example:
Reference code:
var regex_demo = function(){
// Get the string to test
var test_string_1 = $('regex_7_value_1').get('value');
// Get the regular expression to use
var regex_value = $('regex_7_match').get('value');
// Check if we want to escape the regular expression
if ($('regex_7_escape').checked){
// If so, we escape
regex_value = regex_value.escapeRegExp();
}
// Check if we want to ignore upper and lower case
var regex_param = "";
if ($('regex_7_param').checked){
regex_param = "i";
}
// Run the test
var test_result_1 = test_string_1.test(regex_value, regex_param);
if (test_result_1){
$('regex_7_result_1').set('html', "matched");
}
else {
$('regex_7_result_1').set('html', "didn't match");
}
}
String one to test:
Regular expressions
Escape the regularity
Ignore case
Remember, you may have caused the example to not run properly because you used special characters without escapes, so don't be surprised when the examples don't run, because you're playing with these things all the time.
Basic usage
test() method
Its simplicity is that a regular expression can be a simple string you want to match. Although JavaScript itself has provided its own test() method for RegExp objects, MooTools' test() method is better, and it is easier to use regular expressions in JavaScript.
For beginners, let's first look at the simplest usage of the test() method, looking for a specific string in a large string:
Reference code:
Copy the codeThe code is as follows:
// We want to search in this string
var string_to_test = "Match anything in here";
// The regular expression we are looking for
var regular_expression = "anything";
// Apply regular expressions, return true or false
var result = string_to_test.test(regular_expression);
// result is now true
This is basically similar to the behavior of the contains() function, but contains is searched by the complete word, and the regular expression matches anywhere it appears. For example, in the following example, the contains() method will not return true, while the test() method will return true. (Fdream Note: This statement is incorrect as reminded by taoyu3781212. In fact, the contains() method can specify two parameters. The first parameter is the string to be searched, and the second is the delimited string. Only when the second parameter is specified, the contains() method will return false. This is actually the contains() method of array.)
Reference code:
Copy the codeThe code is as follows:
var string_to_match = "anything else";
// Return true
string_to_match.contains('nything')
// Return false
string_to_match.contains('nything', ' ')
// Return true
string_to_match.contains('anything')
// Return true
string_to_match.test('nything');
Also note that unless you explicitly specify that the regex is case sensitive (case sensitive), so looking for "match" in a string containing "Match" will return false. You can try it in the following example:
Reference code:
Copy the codeThe code is as follows:
var regex_demo = function(){
var test_string = $('regex_1_value').get('value');
var regex_value = $('regex_1_match').get('value');
var test_result = test_string.test(regex_value);
if(test_result){
$('regex_1_result').set('html', "matched");
}
else {
$('regex_1_result').set('html', "didn't match");
}
}
Note that there are some special characters in regular expressions that you need to use with caution. If you enter any of these characters into the following regular expression text box, an error will occur. At this time, you need to refresh this page to continue the following example.
- . * + ? ^ $ { } ( ) | [ ] / \
String to test:
Regular expressions
Ignore case
In many cases, you don't need to care about the case of the item you want to match. If you don't want a regular expression to be case sensitive, you can add a parameter "i" when calling the test() method:
Reference code:
Copy the codeThe code is as follows:
// We want to search in this string
var string_to_test = "IgNorE CaSe";
// Return false
string_to_test.test("ignore");
// Return true
string_to_test.test("ignore", "i");
Technically, you can pass multiple parameters to the test() method, but since JavaScript now only supports 3 regular expression parameters (2 of which are enabled by default in the test() method), you may only use the parameter "i" during this period. You can continue to test the difference in case matching:
Reference code:
Copy the codeThe code is as follows:
var regex_demo = function(){
// Get the string to test from the input text box
var test_string = $('regex_2_value').get('value');
// Get regular expression from the input text box
var regex_value = $('regex_2_match').get('value');
// If we need to ignore case
var regex_param = "";
if ($('regex_2_param').checked){
regex_param = "i";
}
// Run the test() method and get the result
var test_result = test_string.test(regex_value, regex_param);
// Update the result display area
if (test_result){
$('regex_2_result').set('html', "matched");
}
else {
$('regex_2_result').set('html', "didn't match");
}
}
String to test:
Regular expressions
Ignore case
Interesting things
Now that we have learned simple matching, we can start looking at some of the more impressive aspects of regular expressions. Everything that might be related to regular expressions is not covered here - we will pick some more direct and useful features.
Use ^ to start matching from string
The "^" operator of a regular expression allows you to match at the beginning of a string, regardless of whether there is a corresponding match after the character. Put it at the beginning of the regular expression you want to match, like this:
Reference code:
Copy the codeThe code is as follows:
// The string we want to test
var string_to_test = "lets match at the beginning"
// Test whether this string starts with lets and returns true
var is_true = string_to_test.match("^lets");
As you expected, if the expression is not at the beginning of the string, this test will return false:
// The string we want to test
var string_to_test = "lets match at the beginning";
// Test whether this string starts with match and returns false
var is_false = string_to_test.match("^match");
Continue to test the following:
String to test:
Regular expressions
Ignore case
Use $ to match the end of the string
The function of the “$” operator is similar to that of the “^”, but there are two differences:
It matches the end of a string instead of the beginning
It is placed at the end of the regular expression instead of the beginning
Other than that, all its features are the same as you expect:
Reference code:
Copy the codeThe code is as follows:
// The string we want to test
var string_to_test = "lets match at the end";
// Test whether this string ends with end and returns true
var is_true = string_to_test.match("end$");
// Test whether this string ends with the, return false
var is_false = string_to_test.match("the$");
By using these two operators in combination, you can do a very clean test: you can check if a string contains only the content of the expression you want to match without anything else.
Reference code:
Copy the codeThe code is as follows:
// The string we want to test
var string_to_test = "lets match everything";
// Test whether this string is exactly the same as "lets match everything", return true
var is_true = string_to_test.match("^lets match everything$");
// Test whether this string is exactly the same as "lets everything", return false
var is_false = string_to_test.match("^lets everything$");
String to test:
Regular expressions
Ignore case
Character Set
Character sets are another regular expression tool that allows you to match multiple specific characters (A or Z) and a series of characters (A to Z). According to an example, if you want to test whether a string contains the word moo or boo, through the character set, you can place these two characters in square brackets [] of a regular expression to achieve it:
Reference code:
Copy the codeThe code is as follows:
// Test the string for moo
var first_string_to_test = "cows go moo";
// Test the string for boo
var second_string_to_test = "ghosts go boo";
// This matches the first string and not the second string
var returns_true = first_string_to_test.test("moo");
var returns_false = second_string_to_test("moo");
// This matches the second string and not the first string
returns_false = first_string_to_test.test("boo");
returns_true = second_string_to_test.test("boo")
// This matches both the first and second strings
returns_true = first_string_to_test("[mb]oo");
returns_true = second_string_to_test("[mb]oo");
String one to test:
String two to test:
Regular expressions
Ignore case
To match a series of characters, you can take out the first character and the last character of the series of characters separately, and then connect them with a connector (-). You can define a series of numbers or characters in this way:
Reference code:
Copy the codeThe code is as follows:
var string_to_test = " b or 3";
// Match a, b, c, or d, return true
string_to_test.test("[a-d]");
// Match 1, 2, 3, 4, or 5. Return true.
string_to_test.test("[1-5]");
If you want to match in multiple character sets, you can put your character set in a square bracket [] and separate it with the "|" operator.
Reference code:
Copy the codeThe code is as follows:
var string_to_test = "b or 3";
// Match a to d or 1 to 5, return true
string_to_test.test([ [a-d] | [1-5] ]);
String one to test:
String two to test:
Regular expressions
Ignore case
escapeRegExp() method
When you see the method of creating regular expressions, you may find it very difficult to match some special characters. For example, what if you were looking for "[stuff-in-here]" or "$300" in a string? You can do this by manually adding ‘\’ to each special character you want to ignore.
Reference code:
Copy the codeThe code is as follows:
// We want to match the string, note [,], - and $
var string_to_match = "[stuff-in-here] or $300";
// Incorrect matching method
string_to_match.test("[stuff-in-here]");
string_to_match.test("$300");
// Correct matching method
// Note the \ in front of [,], - and $
string_to_match.test("\[stuff\-in\-here\]");
string_to_match.test("\$300");
This is often the place to deal with regex headaches, especially when you are not fully familiar with them. For reference, special characters that need to be escaped in regular expressions include:
- . * + ? ^ $ { } ( ) | [ ] / \
Fortunately, MooTools provides escapeRegExp() function to ensure that your regular expressions are escaped correctly. This is another string function, so you just need to call this method on the regular expression string you want to match before you start searching.
Reference code:
Copy the codeThe code is as follows:
// The string we want to escape
var unescaped_regex_string = "[stuff-in-here]";
// Escape this string
var escaped_regex_string = unescaped_regex_string.escapeRegExp();
// The escaped string is "\[stuff\-in\-here\]"
Note that this means that any special characters you want to use in regular expressions must be added after escape:
Reference code:
Copy the codeThe code is as follows:
// strings that need to be escaped
var unescaped_regex_string = "[stuff-in-here]“;
// Escape this string and match from the beginning
var escaped_regex_string = “^” + unescaped_regex_string.escapeRegExp();
// escaped_regex_string is now "^\[stuff\-in\-here\]"
Continue to test the difference between using escapeRegExp() and not using it in the following example:
Reference code:
Copy the codeThe code is as follows:
var regex_demo = function(){
// Get the string to test
var test_string_1 = $('regex_7_value_1').get('value');
// Get the regular expression to use
var regex_value = $('regex_7_match').get('value');
// Check if we want to escape the regular expression
if ($('regex_7_escape').checked){
// If so, we escape
regex_value = regex_value.escapeRegExp();
}
// Check if we want to ignore upper and lower case
var regex_param = "";
if ($('regex_7_param').checked){
regex_param = "i";
}
// Run the test
var test_result_1 = test_string_1.test(regex_value, regex_param);
if (test_result_1){
$('regex_7_result_1').set('html', "matched");
}
else {
$('regex_7_result_1').set('html', "didn't match");
}
}
String one to test:
Regular expressions
Escape the regularity
Ignore case
Remember, you may have caused the example to not run properly because you used special characters without escapes, so don't be surprised when the examples don't run, because you're playing with these things all the time.
More learning
Download a zip package with everything you need to start
It's a great place to refer to and learn - a website worth spending some time browsing. For those who are familiar with Perl or familiar with various language differences,Robert's Perl TutorialThe section on regular expressions in the explanation of some basic concepts very well. Similarly, Stephen Ramsay has written aboutTutorial on Unix regular expressions, explain some of these concepts in a very clear and direct way.
Another good place isRegular Expression Library, They have countless examples of regular expressions to accomplish a wide variety of common tasks. Finally, if you have the courage, you should take some time to look at Mozilla'sJavaScript Regular Expressions Reference Manual. This may be very many, but it is extremely useful. If you want to see the content about the regularity on MooTools, you can check it outDocumentation of test() function。