JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでURLアドレスを検証する方法をわかりやすく解説

JavaScriptでURLアドレスを検証するには？

JavaScriptでURLアドレスの妥当性を確認するには、正規表現（regex）を使うのが一般的な方法です。正規表現による検証では、正しい形式のURLであれば「true」を、誤った形式であれば「false」を返します。

正規表現パターンが対応するURLの構成要素

今回紹介するパターンは、以下のURL構成要素すべてに対応しています。

  • プロトコル：http または https（省略可能）
  • ドメイン名：英数字とハイフンで構成されるドメイン
  • IPアドレス（IPv4）：ドット区切りの数値形式
  • ポート番号：コロンに続く数値（省略可能）
  • クエリ文字列：?以降のパラメータ（省略可能）
  • フラグメント（アンカー）：#以降の識別子（省略可能）

サンプルコード

以下は、実際にブラウザで動作するサンプルコードです。validURL関数にURL文字列を渡すと、検証結果が返されます。

<!DOCTYPE html>
<html>
   <body>
      <script>
         var myURL;
         function validURL(myURL) {
            var pattern = new RegExp('^(https?:\\/\\/)?'+ // プロトコル
            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2}|'+ // ドメイン名
            '((\\d{1,3}\\.){3}\\d{1,3}))'+ // IPアドレス（IPv4）
            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ // ポート番号
            '(\\?[;&a-z\\d%_.~+=-]*)?'+ // クエリ文字列
            '(\\#[-a-z\\d_]*)?$','i');
            return pattern.test(myURL);
         }
         document.write(validURL("https://qries.com"));
      </script>
   </body>
</html>

実行結果

このコードを実行すると、画面に以下の結果が出力されます。

true

「https://qries.com」は正しい形式のURLであるため、検証結果として「true」が返されます。もし誤った形式のURLを渡した場合は「false」が返されます。

コードのポイント

このサンプルでは、RegExpコンストラクタを使って正規表現パターンを生成し、test()メソッドで引数に渡されたURL文字列との一致を判定しています。パターン末尾の「i」フラグを指定することで、大文字と小文字を区別せずに検証できる点もポイントです。

なお、より厳密な検証が必要な場合は、new URL()コンストラクタを利用する方法もあります。try-catchと組み合わせることで、不正なURLを例外として検出できるため、用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでURLオブジェクトを作成する方法をわかりやすく解説

    JavaScriptでは、標準組み込みのURLコンストラクタを使うことで、URL文字列からURLオブジェクトを簡単に生成できます。URLオブジェクトを作成すると、プロトコル（protocol）やホスト名（host）、パス（pathname）など、URLを構成する各要素に個別にアクセスできるようになるため、URLの解析や操作がとても便利になります。 URLオブジェクトの作成例 以下は、JavaScriptでURLオブジェクトを作成し、ボタンをクリックするとその各プロパティを画面に表示するサンプルコードです。 <!DOCTYPE html> <html lang="

  2. JavaScriptで小数を検証するには？正規表現を使った実装例を解説

    JavaScriptで小数を検証する方法 JavaScriptで、ユーザーが入力した値が正しい小数（小数点を含む数値）かどうかを判定したい場面はよくあります。そんなときに便利なのが正規表現です。本記事では、match()メソッドと正規表現を組み合わせて、入力値が小数かどうかを検証する方法を、具体的なコード例とともにわかりやすく解説します。 使用する正規表現パターン 今回の検証では、以下の正規表現を使用します。 /^[-+]?[0-9]+\.[0-9]+$/ このパターンの各要素の意味は次のとおりです。 ^[-+]?：文字列の先頭に符号（+ または -）が付いていても、付いていなくてもマッチ