How to Use JavaScript String match() Method
The String “match()” method matches the pattern against the specified regular expression and returns the corresponding value. If no string matches are found, then its returned value is “Null”. In addition, it supports the additional modifiers to get the desired output. It is useful for quick searching of the string, characters, patterns, or regular expressions.
This write-up illustrates the usage of the string “match()” method in JavaScript.
How to Use JavaScript String match() Method?
The built-in String “match()” method works on the “regexp” as well as string/pattern. Its working can be modified by using the additional “g” modifier for global search otherwise it stops at the first match.
Syntax
The “string.match()” method accepts the “regexp” as an argument that needs to be searched.
HTML Code
First, have a look at the following HTML code:
<button ondblclick="demo()">Double Click</button>
<p id="para"></p>
In the above code snippet:
-
- The “<h2>” tag creates a first subheading.
- The “<button>” tag is attached with an “ondblclick” event that allows the execution of the function named “demo()” upon the button double-click.
- After that, the “<p>” tag creates an empty paragraph having assigned the id “para” to display the matched pattern from the given string.
Note: The given HTML code is followed throughout the article.
Example 1: Applying the String “match()” Method to Match the String
The most basic use of the String “match()” method is to match the particular pattern from the given string.
JavaScript Code
Overview the following code:
function demo() {
var str = "linuxhint";
var result= str.match("hint");
document.getElementById("para").innerHTML = result;
}
</script>
In the above code:
-
- Define a “demo()” function.
- In the “demo()” function definition, the variable “str” of data type “var” specifies the initialized string.
- After that, the “result” variable utilizes the “match()” method to match the specific pattern from the initialized string.
- Lastly, the “document.getElementById()” method approaches the paragraph through its id “para” to display the matched pattern as an output.
Output
The output displays the matched pattern/string from the input string upon the given button double click.
Example 2: Applying the String “match()” Method as RegExp(/regexp/))
The “RegExp” is identical to the basic syntax of the “match()” method. In this example, it is applied to match a particular pattern using JavaScript:
function demo() {
var str = "linuxhint";
var result= str.match(/hi/);
document.getElementById("para").innerHTML = result;
}
</script>
In the above lines of code, the variable “result” uses the “match()” method to match the regular expression “/hi/” from the input string.
Output
As seen, the output of the matched string is identical to the applied pattern.
Example 3: Applying the String “match()” Method to Match the String Globally
In this example, the discussed method is used with the “g(global)” modifier to match the string/pattern globally:
function demo() {
var str = "linuxhintli";
var match= str.match(/li/g);
document.getElementById("para").innerHTML = match;
}
</script>
In this code, the associated “match()” method uses the “g” flag with the targeted regexp(/li/) to find it from the initialized string globally.
Output
The output shows the total matches of the regexp found from the defined string upon button double click.
Example 4: Applying the String “match()” Method as Case Sensitive Search
The “match()” method can also be utilized with the “i(case-insensitive)” modifier to search the string by ignoring the case sensitivity. Let’s see how it can be performed:
function demo() {
var str = "linuxhintli";
var match= str.match(/IN/i);
document.getElementById("para").innerHTML = match;
}
</script>
Here, the regexp is passed to the “match()” method that includes the pattern in “upper case” with the addition of the “i” modifier.
Output
As analyzed, the discussed method displays the lowercase regexp matched from the initialized string without considering the case sensitivity.
Example 5: Applying the String “match()” Method to Print the Matched Element in Range
The discussed method also returns the matched elements from a range i.e., “[a-z]”. For instance, in the below-example, it is used to match the elements in the range “[e-s]”:
function demo() {
var str = "linuxhintli";
var match= str.match(/[e-s]/gi);
document.getElementById("para").innerHTML = match;
}
</script>
In the above code block, the “match()” method performs the global(g) case-insensitive(i) search for matching the elements from the string lying in the “e-s” range.
Output
The output shows all the matched array elements between “e-s” from the initialized string appropriately.
Conclusion
JavaScript provides an inbuilt String “match()” method that searches the string against the specified pattern. It returns the output as a “string” and returns “NULL” if no match is found. It can also be used to return the particular values from a string that lie in a certain range i.e., “[a-z]”. This write-up demonstrated the complete usage of the String “match()” method in JavaScript.
Source: linuxhint.com