The source property in JavaScript regex enables us to retrieve the original source code or format of a regular expression. It allows us to access the pattern of the regular expression that is utilized for processing and validation purposes.
Syntax
The syntax below is utilized for obtaining the pattern of a regular expression.
regexObject.source;
Supported Browsers
The browsers supported by RegExp source properties are given below:
- Google Chrome
- Edge
- Firefox
- Internet Explorer
- Opera
- Safari
Examples
The provided examples demonstrate how regular expressions can be used to match different data types and their corresponding values.
Example 1:
The provided example illustrates the regular expression pattern for the source property. In this case, we are utilizing the regex directly in conjunction with the source keyword.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp source properties
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp source properties
</h3>
<h4> The source property gets the RegExp format of the code of the function
</h4>
<!-- Click the button to get the source properties output -->
<button onclick="display_value();"> Click Here! </button>
<div id="regex_source"> </div>
</div>
<script>
function display_value() {
let source_pattern = /javascript/;
//use regex pattern with source keyword
var final_result = source_pattern.source;
//output shows " javascript" as a source
var ele_demo = document.getElementById("regex_source");
ele_demo.innerHTML = "Available source: " + final_result;
}
</script>
</body>
</html>
Output
The output displays the source code of the regular expression used in the function object.
Example 2:
The provided example demonstrates the implementation of a regular expression pattern for the source property within an array function. In this scenario, the regex pattern incorporates matching criteria for both the beginning and end of the source string by utilizing the source keyword.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp source properties
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp source properties
</h3>
<h4> The source property gets the source code of the regex and its quantifier
</h4>
<!-- Click the button to get the source properties output -->
<button onclick="display_value();"> Click Here! </button>
<div id="regex_source"> </div>
</div>
<script>
function display_value() {
let source_pattern = /^22$/;
//use regex pattern with source keyword
var final_result = source_pattern.source;
//output shows "^22$" as a sourcevar
ele_demo = document.getElementById("regex_source");
ele_demo.innerHTML = "Available source: " + final_result;
}
</script>
</body>
</html>
Output
The output displays the source code of the function in regular expression (regex) format.
Example 3:
The provided example demonstrates the regular expression pattern for the source property. In this case, we apply regular expressions using the new keyword and method format. The modifiers of the pattern are not shown in the source property.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp source properties
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp source properties
</h3>
<h4> The source property gets the RegExp format using the "new" keyword
</h4>
<!-- Click the button to get the source properties output -->
<button onclick="display_value();"> Click Here! </button>
<div id="regex_source"> </div>
</div>
<script>
function display_value() {
const input_str = "javaaC# Tutorial";
let source_pattern = new RegExp("a{2, }", "g");
//use regex method and pattern with source keyword
var final_result = source_pattern.source;
//output shows " javascript" as a source
var ele_demo = document.getElementById("regex_source");
ele_demo.innerHTML = "Available source: " + final_result;
}
</script>
</body>
</html>
Output
The output displays the source code of the function in regular expression (regex) form.
Example 4:
The illustration demonstrates the regex pattern for the source property using the number function. Although we apply a modifier to the regex value, the code snippet does not include any modifiers.
<!DOCTYPE html>
<html>
<head>
<title>
JavaScript RegExp source properties
</title>
<style>
#demo1 {
background-color: orange;
border: 1px solid black;
width: 370px;
}
</style>
</head>
<body>
<div id="demo1">
<h3>
JavaScript RegExp source properties
</h3>
<h4> The source property gets the RegExp pattern with a modifier
</h4>
<!-- Click the button to get the source properties output -->
<button onclick="display_value();"> Click Here! </button>
<div id="regex_source"> </div>
</div>
<script>
function display_value() {
let source_pattern = /\^[0-9]$/gi;
var final_result = source_pattern.source;
// output shows the regex pattern but not the modifier
var ele_demo = document.getElementById("regex_source");
ele_demo.innerHTML = "Available source: " + final_result;
}
</script>
</body>
</html>
Output
The output displays the regular expression source code for the object function.
Benefits
- The regular expression structure can be generated as a string using the source property in certain cases.
- Using the source property, we can duplicate a regular expression.
- A new regular expression object can be constructed as the original object by filling the parameter of a new RegExp property and the value of a current RegExp object.
- The source property helps debug regular expressions in code.
- We can easily change and modify the regex pattern in JavaScript.
- The source format or pattern shows by property but not by modifiers.
Disadvantages
Conclusion
The source property in JavaScript displays the regular expression code used for complex and extensive operations. This property is beneficial for developers when working with regular expressions and performing validation tasks.