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

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

開始

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

この記事の内容を試してみたい場合は、

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);

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

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

console.log(myURL);

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

myURL を使用します。

href

href は、基本的に文字列 (テキスト) としての URL 全体です。ページの URL を URL オブジェクトではなく文字列として指定したい場合は、window.location.href と記述できます。

console.log(myURL.href);
// Output: "https://example.com:4000/folder/page.html?x=y&a=b#section-2"

プロトコル

ftp (ファイル転送プロトコル) や ws (WebSocket) など、他にも多くのプロトコルがあります。通常、Web サイトでは HTTP または HTTPS が使用されます。

: が含まれますが、// は含まれません。 myURL を見てみましょう!

console.log(myURL.protocol);
// Output: "https:"

ホスト名

google.com や codetheweb.blog など、ブラウザに表示される URL の主要部分がドメイン名です。

console.log(myURL.hostname);
// Output: "example.com"

ポート

example.com:1234#) ##)。ほとんどの URL にはポート番号がありませんが、これは非常にまれです。 ポート番号は、データの取得に使用されるサーバー上の特定の「チャネル」です。したがって、

があれば、複数の異なるポートで異なるデータを送信できます。ただし、通常、ドメイン名はデフォルトで特定のポートに設定されるため、ポート番号は必要ありません。 myURL: のポート番号を見てみましょう。

console.log(myURL.port);
// Output: "4000"

console.log(myURL.host);
// Output: "example.com:4000"

console.log(myURL.origin);
// Output: "https://example.com:4000"

console.log(myURL.pathname);
// Output: "/folder/page.html"

console.log(myURL.hash);
// Output: "#section-2"

?key1=value1&key2=value2&key3=value3

console.log(myURL.search);
// Output: "?x=y&a=b"

var searchParams = new URLSearchParams(myURL.search);

?x=y&a=b

console.log(searchParams.get('x'));
// Output: "y"
console.log(searchParams.get('a'));
// Output: "b"

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}
// 这样调用：
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i 
修改 URL 的中某个参数值
//替换指定传入参数的值,paramName为参数,replaceWith为新值
function replaceParamVal(paramName,replaceWith) {
    var oUrl = this.location.href.toString();
    var re=eval('/('+ paramName+'=)([^&]*)/gi');
    var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
    this.location = nUrl;
　　window.location.href=nUrl
}
ログイン後にコピー

以上がJavaScript を使用して URL を解析する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。