Clever Geek Handbook

JavaScriptでURLを解析するにはどうすればよいですか？





良い一日、友達！Dmitri Pavlutinによる



記事「JavaScriptでURLを解析する方法：ホスト名、パス名、クエリ、ハッシュ」の翻訳を紹介します。



ユニフォームリソースロケーターまたは略してURLは、Webリソース（Webページ、画像、ファイル）へのリンクです。URLは、リソースの場所とその受信方法（プロトコル（http、ftp、mailto））を定義します。



たとえば、この記事のURLは次のとおりです。 



https://dmitripavlutin.com/parse-url-javascript


多くの場合、URLの特定の要素を取得する必要があります。これは、ホスト名（hostname、dmitripavlutin.com）またはパス名（pathname、/parse-url-javascript）にすることができます。



URLの個々のコンポーネントを取得する便利な方法は、コンストラクターを使用することURL()です。



この記事では、URLの構造と主要コンポーネントについて説明します。



1.URL構造

写真は千の言葉の価値があります。上の画像では、URLの主要なコンポーネントを見ることができます。







2. URLコンストラクター（）

コンストラクターURL()は、URLコンポーネントを解析（解析）できるようにする関数です。 



const url = new URL(relativeOrAbsolute [, absoluteBase])


引数にrelativeOrAbsoluteは、絶対URLまたは相対URLを指定できます。最初の引数が相対リンクの場合、2番目の引数absoluteBaseは必須であり、最初の引数の基礎となる絶対URLです。



たとえばURL()、絶対URLで初期化しましょう。 



const url = new URL('http://example.com/path/index.html')

url.href // 'http://example.com/path/index.html'


次に、相対URLと絶対URLを組み合わせてみましょう。 



const url = new URL('/path/index.html', 'http://example.com')

url.href // 'http://example.com/path/index.html'


hrefinstance プロパティURL()は、渡されたURL文字列を返します。



インスタンス化した後URL()、URLコンポーネントにアクセスできます。参考までに、インスタンスインターフェイスはURL()次のとおりです。 



interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}


ここで、typeUSVStringは、JavaScriptが文字列を返す必要があることを意味します。



3.クエリ文字列

このプロパティをurl.search使用すると、プレフィックスで始まるURLクエリ文字列を取得できます?。 



const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.search // '?message=hello&who=world'


クエリ文字列がない場合url.searchは、空の文字列（ ''）を返します。 



const url1 = new URL('http://example.com/path/index.html')
const url2 = new URL('http://example.com/path/index.html?')

url1.search // ''
url2.search // ''


3.1。クエリ文字列の解析（解析）

元のクエリ文字列を取得する代わりに、そのパラメータを取得できます。



これを行う簡単な方法は、プロパティによって提供されますurl.searchParams。このプロパティの値は、URLSeachParamsインターフェイスのインスタンスです。



このオブジェクトURLSearchParamsは、クエリ文字列パラメータ（get(param), has(param)など）を操作するための多くのメソッドを提供します。



例を見てみましょう： 



const url = new Url(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null


url.searchParams.get('message')messageクエリ文字列パラメータの値を返します。



存在しないパラメーターにアクセスすると、url.searchParams.get('missing')が返されますnull。



4.ホスト名（ホスト名）

プロパティ値url.hostnameは、URLのホスト名です。 



const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'


5.パス（パス名）

プロパティにurl.pathnameは、URLパスが含まれています。 



const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'


URLにパスがない場合url.pathnameは、次の文字を返します/。 



const url = new URL('http://example.com/');

url.pathname; // '/'


6.ハッシュ

最後に、ハッシュはプロパティを介して取得できますurl.hash。 



const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'


ハッシュがない場合url.hashは、空の文字列（ ''）を返します。 



const url = new URL('http://example.com/path/index.html')

url.hash // ''


7. URLの確認（検証）

コンストラクターを呼び出すと、new URL()インスタンスが作成されるだけでなく、渡されたURLが検証されます。URLが有効でない場合、URLは破棄されTypeErrorます。



たとえば、のhttp ://example.com後にhttpスペースがあるため、有効なURLではありません。



このURLを使ってみましょう： 



try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}


'http ://example.com'間違ったURLであるnew URL('http ://example.com')投げ予想通りTypeError。



8.URLの操作

などのプロパティsearch, hostname, pathname, hashは書き込み可能です。



たとえば、既存のURLのホスト名をred.comからblue.io：に変更してみましょう。 



const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'


プロパティorigin, searchParamsは読み取り専用です。



9.結論

コンストラクターURL()は、JavaScriptでURLを解析（解析）および検証するための非常に便利な方法です。



new URL(relativeOrAbsolute, [, absoluteBase]最初のパラメーターとして絶対URLまたは相対URLを取ります。最初のパラメーターが相対URLである場合、2番目のパラメーターは絶対URL（最初の引数の基礎）である必要があります。



インスタンス化後URL()、URLの主要コンポーネントにアクセスできます。



  • url.search -元のクエリ文字列
  • url.searchParams-URLSearchParamsクエリ文字列パラメータを取得するインスタンス
  • url.hostname -ホスト名
  • url.pathname - 仕方
  • url.hash -ハッシュ値


More articles:


All Articles