- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to concatenate regex literals in JavaScript?
The regex literals are regular expressions, a sequence of characters to match the strings. Sometimes, developers require to combine regular expressions. However, a regular expression is also one type of string, but we can’t concat them like a string using the ‘+’ operator.
So, we first require to get flags from both regular expressions. After that, we must filter all unique flags and create a new Regex after combining multiple Regex literals.
Syntax
Users can follow the syntax below to concatenate regex literals in JavaScript.
let allFlags = regex1.flags + regex2.flags;
let uniqueFlags = new Set(allFlags.split(''));
allFlags = [...uniqueFlags].join('');
let combined = new RegExp(regex1.source + regex2.source, allFlags);
In the above syntax, first, we get flags of both regular expressions. After that, we create a set from that to get the unique flag and combine both regex literals.
Example 1
In the example below, we have defined two regex literals. We have used the ‘flags’ property of the regex literals to get the flags from both regexes. After that, we created a set of flags to get unique ones. Next, we converted the set to an array.
After that, we used the ‘source’ property of regex to get the regex literals and combined both regex literals using the ‘+’ operator. Also, we have used all the unique flags included in both regex literals while creating the combined regex literals.
<html>
<body>
<h2>Concatenating the <i> Regex literals </i> in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
// concatenate two regex literals
let regex1 = /hello/i;
let regex2 = /world/g;
let allFlags = regex1.flags + regex2.flags;
let uniqueFlags = new Set(allFlags.split(''));
allFlags = [...uniqueFlags].join('');
let combined = new RegExp(regex1.source + regex2.source, allFlags);
output.innerHTML += "The first regex is: " + regex1 + "<br>";
output.innerHTML += "The second regex is: " + regex2 + "<br>";
output.innerHTML += "The combined regex is: " + combined + "<br>";
</script>
</body>
</html>
Example 2
In the example below, users need to input the regex literals and related flags. Also, users need to fill in string input to test with combined regular expressions.
Whenever users press the button, it executes the combineRegex() function. In which we combine both input regex with proper flags. After that, we use the test() method to check if the string matches the combined regular expression, and it returns the boolean values.
<html>
<body>
<h2>Concatenating the <i> Regex literals </i> in JavaScript</h2>
<input type = "text" placeholder = "regex1" id = "regex1">
<input type = "text" placeholder = "flags" id = "flag1">
<br> <br>
<input type = "text" placeholder = "regex2" id = "regex2">
<input type = "text" placeholder = "flags" id = "flag2">
<br> <br>
<input type = "text" placeholder = "string to test regex" id = "str">
<br> <br>
<div id = "output"> </div>
<button id="btn" onclick="combineRegex()"> Combine and Match Regex </button>
<script>
let output = document.getElementById('output');
function combineRegex() {
let regex1 = new RegExp(document.getElementById('regex1').value, document.getElementById('flag1').value);
let regex2 = new RegExp(document.getElementById('regex2').value, document.getElementById('flag2').value);
let allFlags = regex1.flags + regex2.flags;
let uniqueFlags = new Set(allFlags.split(''));
allFlags = [...uniqueFlags].join('');
let combined = new RegExp(regex1.source + regex2.source, allFlags);
let str = document.getElementById('str').value;
let result = combined.test(str);
output.innerHTML += "The combined regex " + combined + " matches the string " + str + " : " + result;
}
</script>
</body>
</html>
Example 3
In the example below, we first write regex in the form of a regular string. After that, we merge both strings and use the RegExp() constructor to create a new regular expression from the combined string.
Also, we can pass the required flags as a second parameter.
<html>
<body>
<h2>Concatenating the <i> Regex literals </i> in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let part1 = "Hello";
let part2 = " World";
var pattern = new RegExp(part1 + part2, "g");
output.innerHTML = "The combined regex is: " + pattern + "<br>";
</script>
</body>
</html>
Conclusion
Users learned to concatenate the Regex literals in JavaScript. In the first example, we concatenate the regex literals after creating them. In the last example, we combined the string first and created a new regular expression using the combined string. However, the last example doesn’t use the regex literals as it uses the constructor to create a regular expression.
864 Views
