JavaScriptでURLを解析する方法の紹介（コード例）

この記事では、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')

これをコピーして

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル