JavaScript Regex Source Properties

JavaScript regex source property helps to return the source code or format of the regular expression. We can get the regular expression pattern used for the operation and validation.

Syntax

The following syntax is used to get the regular expression's pattern.

Supported Browsers

The browsers supported by RegExp source properties are given below:

Google Chrome
Edge
Firefox
Internet Explorer
Opera
Safari

Examples

The following examples work for the types of the regex data and its value.

Example 1:

The example shows the regex regex pattern for the source property. Here, we use regex directly 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 shows the regex source code of the object function.

Example 2:

The example shows the array function regex pattern for the source property. Here, we use regex with start and end match values using 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 shows the regex source code of the function.

Example 3:

The example shows the string regex pattern for the source property. Here, we use regex with the new keyword and method format. The source property does not display modifiers of the pattern.

<!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 = "javaatpoint";
            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 shows the regex source code of the function.

Example 4:

The example shows the number function regex pattern for the source property. We use the regex value with a modifier, but the source code does not show 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 shows the regex source code of 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.

Disadvantages

We can easily change and modify the regex pattern in JavaScript.
The source format or pattern shows by property but not by modifiers.

Conclusion

The source property shows the regex code of JavaScript for complicated and lengthy operations. It helps developers to operate regex and its validation.

Next TopicJavaScript Regex Dotall and Flags Properties

← prev next →