ホームページ > ウェブフロントエンド > jsチュートリアル > JavascriptのURL解析メソッドの詳しい解説_javascriptスキル

JavascriptのURL解析メソッドの詳しい解説_javascriptスキル

WBOY
リリース: 2016-05-16 16:29:03
オリジナル
1721 人が閲覧しました

URL: ユニフォーム リソース ロケーター (URL)

完全な URL は次の部分で構成されます:
スキーム://ホスト:ポート/パス?クエリ#フラグメント

スキーム = 通信プロトコル (一般的に使用される http、ftp、maito など)
host = ホスト (ドメイン名または IP)
port = ポート番号
パス = パス

クエリ = クエリ
オプション。動的 Web ページ (CGI、ISAPI、PHP/JSP/ASP/ASP.NET などのテクノロジを使用して作成された Web ページなど) にパラメータを渡すために使用されます。各パラメータは「&」記号で区切って複数指定できます。名前と値は「=」記号で区切られます。

フラグメント = 情報の断片
ネットワークリソース内のフラグメントを指定するために使用される文字列。たとえば、Web ページに複数の名詞の説明がある場合、フラグメントを使用して特定の名詞の説明を直接見つけることができます。 (アンカーポイントとも呼ばれます。)

そのような URL の場合
http://www.master8.net:80/seo/?ver=1.0&id=6#imhere

JavaScript を使用してさまざまな部分を取得できます
1、window.location.href
URL 文字列全体 (ブラウザの完全なアドレス バー)

2,window.location.protocol
URL のプロトコル部分
この例の戻り値: http:

3,window.location.host
URL のホスト部分
この例の戻り値: www.master8.net

4,window.location.port
URL のポート部分
デフォルトのポート 80 が使用されている場合 (更新: :80 が追加された場合でも)、戻り値はデフォルトの 80 ではなく、空の文字
になります。 この例の戻り値:""

5,window.location.pathname
URL のパス部分 (つまり、ファイルアドレス)
この例の戻り値:/seo/

6,window.location.search
クエリ(パラメータ)部分
動的言語に値を割り当てるだけでなく、静的ページに値を割り当て、JavaScript を使用して対応するパラメータ値を取得することもできます。
この例の戻り値:?ver=1.0&id=6

7,window.location.hash
アンカー
この例の戻り値: #imhere

8. URL パラメータ値

方法 1: 定期的な分析

コードをコピーします コードは次のとおりです:

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

方法 2: 配列に分割する

コードをコピーします コードは次のとおりです:

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 < strs.length; i ) {
TheRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
リクエストを返します;
}

この方法は非常に簡単ですが、非常に実用的です。別の方法がある場合は、お知らせください。一緒に進歩しましょう

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート