URLのJavaScript解決の道

URLはバックエンドプログラマが関心を持っていることが多いですが、フロントエンドプログラマーも付き合う必要があります.多くの人がやったことがあるのは、href属性の書き込み操作によってジャンプページの目的に達するということです.URLについて、私達はもっと多くのことを知りたいです.私達の開発にはURLの一部の情報を抽出して異なることをする必要があるかもしれません.実はこれもバックエンドと対話する独特の方法です.もちろんこれは安全です.要求が返ったら、urlに関する情報はWindowオブジェクトのLocation属性に記録されます.値を取った結果は、ユーザーがアドレスバーの文字を手動で変更することによって何も変化しないことが重要です.これらの内容を理解したら、次の図から始めましょう.
これらの色ブロックに惑わされないでください.画像の中間の長い文字列は完全なURLです.これは一つのURLに含まれている可能性のあるあらゆる部分を含みます.プロトコル、ドメイン名、ポート番号、パス、パラメータ、トレースポイント.JavaScriptでは、この行の文字列を取得する方法は、window.location.hrefにアクセスすることであり、href属性はページの完全なURLを含んでいる.URLの一部の値を取得したいならば、複雑で煩雑な正規表現によってこの完全なURLを解析することができますが、より便利な方法はlocationの他の属性によって取得することです.例えば、locationのprotocol属性には、コロン付きのプロトコル名が記録されています.パス名はpathname属性に記憶されています.これらの属性はhrefの分離で、開発者に多くの便利をもたらしています.下の表には、locationにおけるすべての属性と、それぞれの記録値が羅列されています.表の内容が理解できない場合、上の図の色ブロックと文字は、各属性のURLに対応する位置をイメージ的に記述している.
属性
値
href
完全なURL
protocol
プロトコル
hostname
ホスト名
ホスト
ホスト名とポート番号
ポーター
のポート番号
pathname
現在のURLのパス部分
search
URLの照会部分
sh
葃起の錨
注意すべきなのは、上の属性はすべて書くことができて、これは私達がJavaScriptを通じて(通って)彼らの値を変えることができることを表しています.これらの属性は大体一目瞭然で、非常に簡単です.search部分だけが面倒くさいです.search部分はGET方式でバックグラウンドに伝わるパラメータです.最初に、&セパレータとして、=赋値の序列化された文字列は、location.searchによって得られた値は、しばしば最終的な結果ではなく、searchの構造によって分析され、明確な対応関係を含む関連配列であることが望ましい結果となるかもしれない.そこで、私たちはlocation.searchで得られた文字列をさらに処理する必要がある.

function getArgs() {

    var args = {};

    var query = location.search.substring(1);     // Get query string

    var pairs = query.split("&");                 // Break at ampersand

    for(var i = 0; i < pairs.length; i++) {

        var pos = pairs[i].indexOf('=');          // Look for "name=value"

        if (pos == -1) continue;                  // If not found, skip

        var argname = pairs[i].substring(0,pos);  // Extract the name

        var value = pairs[i].substring(pos+1);    // Extract the value

        value = decodeURIComponent(value);        // Decode it, if needed

        args[argname] = value;                    // Store as a property

    }

    return args;                                  // Return the object

}

上のコードは『JavaScript権威ガイド』本から来ています.getArgs法はパラメータを受信せず、URLのsearch部分を自発的に抽出して解析し、JSONに戻る.例えば、最初の写真のURLは、getArgs法を使って以下のような結果が得られます.

var search = {

    "q" : "123",

    "a" : "321"

}

このようにURLに関するすべての情報は非常に明確な結果を得ることができ、簡単である.しかし、Domainの方法をよりオススメします.彼の方法は正規表現を使ってURLを解析し、目的が一致します.この方法のコードについては、本明細書でコメントした13階において、ここですをクリックして素早く到達します.