Regular expressions in JavaScript with groups [a|b] can be used to match alternative characters or numbers within a string. These groups allow for specifying multiple options for a character or number to match within the string using regex. The methods like test, search, and match can be applied to work with these regex groups to find or extract the desired values based on the defined alternatives.
Syntax
The syntax below is utilized for creating regex groups that match alternative characters.
/[a|b]/
/[a|b]/modifier;
Explanation
- The modifier is not mandatory but essential for manipulating entire string information.
- It is possible to employ various values as a substitute for a group of data.
Examples
Below are some illustrations demonstrating the character set alternative in JavaScript regex.
Example 1
The provided illustration demonstrates how to use a regular expression group to match an alternative character string.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [j|w] number does not as an character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here! </button>
</div>
<script>
function display_group() {
// Use regex alternative group character with global modifier
let input_pattern = /[[j|w]/g;
var group_t1 = input_pattern.test('Example website');
var group_t2 = input_pattern.test('javascript');
var group_t3 = input_pattern.test('websites for learning');
// Output shows the Boolean value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "Example website : " + group_t1 + "<br> javascript: " + group_t2 +
" <br> websites for learning: " + group_t3
}
</script>
</body>
</html>
Output
The result displays the alternative character provided from the input string.
Example 2
In this instance, the regex group is utilized to match an alternative string as a character.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [j|w] number does not as a character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here! </button>
</div>
<script>
function display_group() {
// Use regex alternative group character with global modifier
let input_pattern = /[[j|w]/g;
var group_input1 = "Example website";
var group_input2 = "javascript";
var group_input3 = "website to learn";
var group_alter1 = group_input1.match(input_pattern);
var group_alter2 = group_input2.match(input_pattern);
var group_alter3 = group_input3.match(input_pattern);
// Output shows the available value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "Example website : " + group_alter1 + "<br> javascript : " + group_alter2 +
" <br> website to learn : " + group_alter3;
}
</script>
</body>
</html>
Output
The result displays the alternate character provided in the input string.
Example 3
In this instance, the JavaScript regex is utilized to match values such as 'j', 'w', 'a', or 't'. With regex groups, multiple characters can be employed to match strings.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [a|j|w|t] number does not as an character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here! </button>
</div>
<script>
function display_group() {
// Use multiple alternative group characters with a global modifier
let input_pattern = /[a|j|w|t]/g;
var group_input1 = "Example website";
var group_input2 = "javascript";
var group_input3 = "website to learn";
var group_alter1 = group_input1.match(input_pattern);
var group_alter2 = group_input2.match(input_pattern);
var group_alter3 = group_input3.match(input_pattern);
// Output shows the matching value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "Example website : " + group_alter1 + "<br> javascript : " + group_alter2 +
" <br> website to learn : " + group_alter3;
}
</script>
</body>
</html>
Output
The result displays an alternate character selected from the input string.
Example 4
The subsequent illustration demonstrates the process of locating specified numerical values within a string.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [a|j|w|t] number does not as an character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here! </button>
</div>
<script>
function display_group() {
// Use regex alternative group character with search method
let input_pattern = /[a|t]/g;
var group_input1 = "Example website";
var group_input2 = "javascript";
var group_input3 = "website to learn";
var group_alter1 = group_input1.search(input_pattern);
var group_alter2 = group_input2.search(input_pattern);
var group_alter3 = group_input3.search(input_pattern);
// Output shows the index value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "Example website : " + group_alter1 + "<br> javascript : " + group_alter2 +
" <br> website to learn : " + group_alter3;
}
</script>
</body>
</html>
Output
The result displays the specified alternate character extracted from the provided string.
Example 5
The subsequent example demonstrates the presence of an alternate character represented by numerical values.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [0|1] number does not as an character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here!</button>
</div>
<script>
function display_group() {
// Use the regex alternative group's number with the search method
let input_pattern = /[0|1]/g;
var group_input1 = "98011";
var group_input2 = "22341";
var group_input3 = "2002132";
var group_alter1 = group_input1.search(input_pattern);
var group_alter2 = group_input2.search(input_pattern);
var group_alter3 = group_input3.search(input_pattern);
// Output shows the index position of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "98011 : " + group_alter1 + "<br> 22341 : " + group_alter2 + " <br> 2002132 : " +
group_alter3;
}
</script>
</body>
</html>
Output
The result displays the alternate character provided in the input string.
Example 6
The provided illustration demonstrates the alternative character matching of the digits.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [0|1|2] number does not as an character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here!</button>
</div>
</body>
</body>
<script>
function display_group() {
// Use multiple alternative group numbers with the search method
let input_pattern = /[0|1|2]/g;
var group_input1 = "98011";
var group_input2 = "22341";
var group_input3 = "2002132";
var group_alter1 = group_input1.match(input_pattern);
var group_alter2 = group_input2.match(input_pattern);
var group_alter3 = group_input3.match(input_pattern);
// Output shows the available value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "98011 : " + group_alter1 + "<br> 22341 : " + group_alter2 + " <br> 2002132 : " + group_alter3;
}
</script>
</body>
</html>
Output
The result displays the alternate character provided in the input string.
Example 7
In this instance, the JavaScript regex is employed to match values that can be either "j," "w," "a," or "t." By utilizing the global and case-insensitive modifiers, it is possible to match strings by including multiple characters within the regex group.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the [a|j|w|t] number does not as a character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here! </button>
</div>
<script>
function display_group() {
// Use regex alternative group character with modifiers
let input_pattern = /[a|j|w|t]/gi;
var group_input1 = "Example website for Javascript";
var group_input2 = "javascript Tutorial";
var group_input3 = "Website to Learn";
var group_alter1 = group_input1.match(input_pattern);
var group_alter2 = group_input2.match(input_pattern);
var group_alter3 = group_input3.match(input_pattern);
// Output shows the available value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = "Example website : " + group_alter1 + "<br> javascript : " + group_alter2 +
" <br> website to learn : " + group_alter3;
}
</script>
</body>
</html>
Output
The result displayed is the alternative character extracted from the provided input string.
Example 8
In the upcoming illustration, specific values are extracted from an array using regular expressions, where multiple characters or array elements can be utilized.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp groups
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp groups for alternative characters
</h3>
<h4> the regex group test the (php|jquery) number does not as an character
</h4>
<div id="regex_group"></div>
<!-- Click the button to get an alternative value -->
<button onclick="display_group ();"> Click Here! </button>
</div>
<script>
function display_group() {
// Use alternative group value with global modifier
let input_pattern = /(php|jquery)/g;
var group_input1 = "java, php, jquery, javascript, nodejs";
var group_alter1 = group_input1.match(input_pattern);
// Output shows the available value of the regex pattern
var ele = document.getElementById("regex_group");
ele.innerHTML = group_alter1;
}
</script>
</body>
</html>
Output
The result displays the alternative character provided within the input string.
Conclusion
Regular expression groups in JavaScript are utilized for handling different sets of data and details. They are beneficial in isolating specific values. These groups provide a convenient method for manipulating information through functions like search, match, and test.