URLの形式かを検証したい | 正規表現 | JavaScript 目的別リファレンス

このプログラムでは、JavaScriptの正規表現を使用して、文字列が有効なURL形式であるかどうかを確認します。

INDEX

URL検証プログラム
1. HTMLとJavaScriptコード
2. プログラムの解説
RegExpオブジェクトメソッドの機能一覧

URL検証プログラム

以下のコードでは、正しいURL形式と間違ったURL形式をそれぞれ検証しています。

HTMLとJavaScriptコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>URLの形式を検証する方法</title>
    <script>
        window.onload = function() {
            // URLの形式を検証する関数
            function validateURL(url) {
                const urlPattern = /^(https?:\/\/)?([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})(:[0-9]{1,5})?(\/.*)?$/;
                return urlPattern.test(url);  // 正規表現でURL形式を検証
            }

            // テスト用のURL
            const validURL = "https://www.example.com";
            const invalidURL = "htp://example";

            // URLの形式を検証
            const validResult = validateURL(validURL);
            const invalidResult = validateURL(invalidURL);

            // 結果をHTMLに表示
            document.getElementById('validURLCheck').textContent = `「${validURL}」は正しいURL形式か: ${validResult}`;
            document.getElementById('invalidURLCheck').textContent = `「${invalidURL}」は正しいURL形式か: ${invalidResult}`;
        }
    </script>
</head>
<body>

    <h1>URLの形式を検証する方法</h1>

    <div id="validURLCheck"></div>
    <div id="invalidURLCheck"></div>

</body>
</html>

プログラムの解説

このプログラムでは、正規表現を使用してURLの形式が正しいかどうかを検証しています。test()メソッドを使って、指定されたURLが正規表現にマッチするかを判定しています。

以下は正規表現およびtest()メソッドに関する注意点です。

正規表現では、/^(https?:\/\/)?([a-zA-Z0-9.-]+)\.([a-zA-Z]{2,})(:[0-9]{1,5})?(\/.*)?$/の形式でURLを検証しています。
このパターンは、一般的なURL形式をカバーしていますが、すべての有効なURLを保証するわけではないため、実際の運用では外部ライブラリやサーバー側のバリデーションも推奨されます。
URLのプロトコル（httpやhttps）は省略可能であり、パターンのhttps?部分でどちらも許可しています。
ポート番号やパスもオプションとして扱われており、:[0-9]{1,5}や\/.*がそれに対応します。