URL Regex JavaScriptバリデーター

URL Regex JavaScriptバリデーターでURLを即座に検証できます。ユーザー送信フォーム、データスクレイピング、API呼び出しなど、すべてのリンクが正しくフォーマットされているかを確認します。HTTP/HTTPS、サブドメイン、クエリパラメーターに対応。JavaScript Regex Testerでパターンをライブテストしたり、Token GeneratorやBase64 EncoderでエンコードされたURLやアクセストークンを安全に処理したりすることもできます。

URL Regex JavaScriptバリデーター - ドキュメント

JavaScriptにおけるURL Regexとは？

JavaScriptにおいて、URL regex（正規表現）は、文字列が有効なウェブアドレスの構造に従っているかどうかを確認するために使用されます。HTTP/HTTPSリンク、ドメイン名、オプションのパスやクエリパラメーターが含まれます。

有効なURLには主に3つの要素があります：

主な構成要素：

プロトコル (httpまたはhttps)
ドメイン名（またはIPアドレス）
ポートとパス（ポートは任意で、パスはリソースの場所を指定します）

適切に構成されたregexは、これらの主要な構成要素がそれぞれ正しくフォーマットされているかどうかを確認するのに役立ちます。

URL regexパターンが役立つ場面：

フォームやユーザー入力のリンク検証
テキストやログからのURL抽出
ウェブスクレイピングや自動化スクリプトでのデータクリーニング
無効なリンクのサーバー送信防止

有効なURLの条件とは？

有効なURLには3つの主要部分があります：

プロトコル：リソースへのアクセス方法 (例：http、https)。
ドメイン名またはIPアドレス：ウェブサイトやリソースの一意のアドレス。
ポートとパス (任意)：ポート番号と特定のパスやファイル。

よく使われるURL Regexパターン (JavaScript)

基本的なURL検証によく使われるregexパターン：

/^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/

このパターンは以下を確認します：

httpまたはhttps（任意）
有効なドメイン名
オプションのパスとクエリ文字列

JavaScriptでregexによるURL検証を行う方法

JavaScriptでregexを使ったURL検証の基本例：

function isValidURL(url) {
  const urlPattern = /^(https?:\/\/)?([\w-]+\.)+[\w-]{2,}(\/[\w\-._~:/?#[\]@!$&'()*+,;=]*)?$/;
  return urlPattern.test(url);
}
// テスト
console.log(isValidURL("https://example.com"));           // true
console.log(isValidURL("http://my.site/path?q=1"));       // true
console.log(isValidURL("invalid-url"));                   // false

有効・無効なURLの例

入力	有効？
https://example.com	はい
http://sub.domain.co.uk	はい
ftp://invalid.protocol.com	いいえ
example..com	いいえ

JavaScript URLオブジェクトを使った検証

Regexよりも堅牢な組み込みの解決策として、JavaScriptのURLオブジェクトがあります。複雑なURLのエッジケースも処理し、regexのパターン管理が不要です。

文字列から新しいURLオブジェクトを作成しようとし、失敗した場合はエラーをキャッチするだけです。

function isValidURL(url) {
try {
new URL(url);
return true;
} catch (err) {
return false;
}
}

使用例：

console.log(isValidURL("https://example.com"));        // true
console.log(isValidURL("http://sub.domain.com/path")); // true
console.log(isValidURL("not a url"));                  // false
console.log(isValidURL("ftp:/missing.slashes.com"));   // false

URLバリデーションのアプローチ比較

1. Regular Expression (Regex) を使う

URLの構造を素早くチェックするためによく使われます。以下を確認します：

httpまたはhttps（任意）
有効なサブドメインとドメイン名
2文字以上のドメイン拡張子
オプションのパス、クエリパラメーター、フラグメント

2. URL Constructorを使う

JavaScriptの組み込みオブジェクトで、カスタムパターンなしに検証と解析が行えます：

このメソッドは信頼性が高く、エッジケースも対応できます。包括的な検証が必要な場合にお勧めです。

3. サードパーティパッケージを使う

より高度な検証には、is-urlやis-url-httpなどのnpmパッケージが便利です：

import isUrl from 'is-url';
console.log(isUrl("https://example.com")); // true
console.log(isUrl("invalid-url")); // false

用途に合わせてアプローチを選択してください：簡単なチェックにはregex、信頼性にはURLオブジェクト、高度な検証にはサードパーティパッケージ。

URLオブジェクトを使う理由

正確性：URLオブジェクトは公式のURLパース規則に従い、regexが見逃しがちなエッジケースも処理します。
可読性：コードが読みやすく、メンテナンスも容易です。
エラーハンドリング：無効なURLの場合は明確なエラーをスローします。
柔軟性：ホスト名、パス名、クエリパラメーターなど、URLの各部分に直接アクセスできます。

npm パッケージを使ったURL検証

is-url-httpの使い方

パッケージのインストール：
```
npm install is-url-http
```

JavaScriptでのインポートと使用：

import isUrlHttp from 'is-url-http';
// 例
isUrlHttp("https://www.example.com"); // true
isUrlHttp("http://example.com");      // true
isUrlHttp("www.example.com");         // false
isUrlHttp("invalid-url");             // false

is-urlの使い方

import isUrl from 'is-url';
console.log(isUrl("https://www.example.com")); // true
console.log(isUrl("http://example.com"));      // true
console.log(isUrl("www.example.com"));         // false
console.log(isUrl("invalid-url"));             // false