JavaScript を使用して URL を解析する方法の詳細な説明

Web 開発では、URL を解析する必要がある状況が数多くあります。この記事では主に、URL オブジェクトを使用して次のことを行う方法を学習します。これを達成します。

開始

次の内容を含む HTML ファイルを作成し、ブラウザで開きます。

    
        <title>JavaScript URL parsing</title>
    
    
        <script>
            // 激动人心的代码即将写在这里
        </script>
    

この記事の内容を試してみたい場合は、<script> タグに入れて保存し、ページをリロードして、何が起こるかを確認してください。このチュートリアルでは、console.log を使用して必要なコンテンツを出力します。開発ツールを開いてコンテンツを表示できます。 </script>

URL とは

これは非常に単純ですが、明確にしておきます。 URL は、Web ページの固有のコンテンツを取得するためにブラウザに入力できる Web ページのアドレスです。これはアドレス バーで確認できます。

URL は、Uniform Resource Locator であり、インターネットから利用できるリソースの場所とアクセス方法を簡潔に表現したものです。インターネット上の標準リソースのアドレス。インターネット上のすべてのファイルには固有の URL があり、その URL には、ファイルの場所とブラウザがファイルに対して何を行うべきかを示す情報が含まれています。

また、基本的な URL パスの仕組みがよくわからない場合は、この記事を参照して学習してください。

URL はすべて同じように見えるわけではありません

簡単に注意してください。URL は、次のように非常に奇妙になる場合があります:

https://example。 com: 1234/page/?a=b

http://localhost/page.html

https://154.23.54.156/page?x=...

file :///Users/username/folder/file.png

現在の URL を取得する

現在のページの URL を取得するのは非常に簡単です。## を使用できます。 #window.location。

これを作成したスクリプトに追加してみてください:

console.log(window.location);

ブラウザ コンソールを確認してください:

望んでいることではありませんか? それは、ブラウザに表示される実際の URL アドレスを返すのではなく、URL オブジェクトを返します。この URL オブジェクトを使用すると、URL のさまざまな部分を解析できます。これについては次に説明します。

URL オブジェクトの作成

すぐにわかるように、URL オブジェクトを使用して URL のさまざまな部分を理解できます。現在のページの URL だけでなく、任意の URL に対してこれを実行したい場合はどうすればよいでしょうか?これを行うには、新しい URL オブジェクトを作成します。作成方法は次のとおりです:

var myURL = new URL('https://example.com');

とても簡単です。

myURL を印刷して、myURL の内容を表示できます。

console.log(myURL);

この記事では、myURL を次のように設定します。値:

var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')

これをコピーして