JavaScript String Properties and Methods: match()

The match() method searches a string for matches against a regular expression or a plain string. It returns an array of matches or null if there are none. It’s especially useful for advanced pattern searching within text and supports various search modes, including global searching and case‑insensitivity.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>match()</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
        .result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .code-example {
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
        }
        .match-result {
            font-weight: bold;
        }
        .match-string { color: #e91e63; }
        .match-regex { color: #2196F3; }
        .match-global { color: #4CAF50; }
        .match-insensitive { color: #9c27b0; }
    </style>
</head>
<body>
    <h3>Finding matches with match()</h3>
    <div class="code-example">
        let text = "Welcome to the JavaScript tutorial!";
    </div>
    
    <div class="result">
        <div id="m1"></div>
        <div id="m2"></div>
        <div id="m3"></div>
        <div id="m4"></div>
    </div>

    <script>
        let text = "Welcome to the JavaScript tutorial!";
        
        // Search using a plain string
        let result1 = text.match("Welcome");
        document.getElementById("m1").innerHTML = 
            `Search with a plain string: <span class="match-result match-string">${result1}</span>`;
        
        // Search using a regular expression
        let result2 = text.match(/t/);
        document.getElementById("m2").innerHTML = 
            `Search with a regular expression: <span class="match-result match-regex">${result2}</span>`;
        
        // Global search
        let result3 = text.match(/JavaScript/g);
        document.getElementById("m3").innerHTML = 
            `Global search: <span class="match-result match-global">${result3}</span>`;
        
        // Global, case-insensitive search
        let result4 = text.match(/tutorial!/gi);
        document.getElementById("m4").innerHTML = 
            `Global search (case-insensitive): <span class="match-result match-insensitive">${result4}</span>`;
    </script>
</div>
</body>
</html>

RESULT