js深度解析url地址

wayneli 發(fā)布于2019-08-21 14:14 / 1217人閱讀

摘要：站在巨人的肩膀上靈感來源和上面一個地址，可以讓你學(xué)到如何解析一個地址，從中解析出每一個參數(shù)內(nèi)容第二個鏈接的問題就是參數(shù)中的鍵值對出現(xiàn)了號，這是信息，如果再用切割，就會出問題，這里就改版了一下調(diào)用方法上面故意把參數(shù)寫的很亂，為了測試，如果上面

“站在巨人的肩膀上”

靈感來源：

https://segmentfault.com/a/1190000004601319

和

http://mp.weixin.qq.com/mp/ad_biz_info?__biz=MzAwMjU3OTY5NQ==#wechat_webview_type=2&wechat_redirect

上面一個地址，可以讓你學(xué)到如何解析一個url地址，從中解析出每一個參數(shù)內(nèi)容
第二個鏈接的問題就是參數(shù)中的鍵值對出現(xiàn)了==號，這是base64信息，如果再用=切割，就會出問題，這里就改版了一下

String.prototype.parseURL = function(){
    var url =this.toString()
    var a = document.createElement("a");
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(":", ""),
        host: a.hostname,
        port: a.port,
        query: a.search,
        file: (a.pathname.match(//([^/?#]+)$/i) || [, ""])[1],
        hash: a.hash.replace("#", ""),
        path: a.pathname.replace(/^([^/])/, "/$1"),
        relative: (a.href.match(/tps?://[^/]+(.+)/) || [, ""])[1],
        segments: a.pathname.replace(/^//, "").split("/"),
        params: (function() {
            var ret = {};
            var seg = a.search.replace(/^?/, "").split("&").filter(function(v,i){
                if (v!==""&&v.indexOf("=")) {
                    return true;
                }
            });
            seg.forEach( function(element, index) {
                var idx = element.indexOf("=");
                var key = element.substring(0, idx);
                var val = element.substring(idx+1);
                ret[key] = val;
            });
            return ret;
        })()
    };
}

調(diào)用方法：

location.href.parseURL();

"http://a.com:8888/a/b.html?c=1&0=0&d===&=1".parseURL();
//上面故意把參數(shù)寫的很亂，為了測試，如果上面你的瀏覽器報錯，說明版本較低，可以如下寫法

("http://a.com:8888/a/b.html?c=1&0=0&d===&=1").parseURL();

GPU云服務(wù)器云服務(wù)器 js解析url url解析解析url url地址

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87820.html

相關(guān)文章

深度解析之異步加載和預(yù)加載

摘要：當(dāng)然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設(shè)置請求頭或加入一段強制開啟域名解析的標(biāo)簽。廢話：異步加載和預(yù)加載一直都是前端優(yōu)化必備技能之一，今天我們就來深度解析一下常用的幾個關(guān)鍵點。異步加載廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...

qpal 2019-08-02 16:10 評論0 收藏0
深度解析之異步加載和預(yù)加載

摘要：當(dāng)然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設(shè)置請求頭或加入一段強制開啟域名解析的標(biāo)簽。廢話：異步加載和預(yù)加載一直都是前端優(yōu)化必備技能之一，今天我們就來深度解析一下常用的幾個關(guān)鍵點。異步加載廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...

HackerShell 2019-08-26 13:41 評論0 收藏0
面試題之從敲入 URL 到瀏覽器渲染完成

摘要：響應(yīng)由三個部分組成，分別是狀態(tài)行消息報頭響應(yīng)正文。詳情參考小汪之前寫的文章瀏覽器內(nèi)核之解釋器和模型解釋解釋過程是指從字符串經(jīng)過解釋器處理后變成渲染引擎內(nèi)部規(guī)則的表示過程。 showImg(https://segmentfault.com/img/remote/1460000016404846); 前言小汪最近在看【W(wǎng)ebKit 技術(shù)內(nèi)幕】一書，說實話，這本書寫的太官方了，不通俗易懂。...

MAX_zuo 2019-08-23 11:59 評論0 收藏0
從0-1打造最強性能Scrapy爬蟲集群

摘要：包括爬蟲編寫爬蟲避禁動態(tài)網(wǎng)頁數(shù)據(jù)抓取部署分布式爬蟲系統(tǒng)監(jiān)測共六個內(nèi)容，結(jié)合實際定向抓取騰訊新聞數(shù)據(jù)，通過測試檢驗系統(tǒng)性能。 1 項目介紹本項目的主要內(nèi)容是分布式網(wǎng)絡(luò)新聞抓取系統(tǒng)設(shè)計與實現(xiàn)。主要有以下幾個部分來介紹：（1）深入分析網(wǎng)絡(luò)新聞爬蟲的特點，設(shè)計了分布式網(wǎng)絡(luò)新聞抓取系統(tǒng)爬取策略、抓取字段、動態(tài)網(wǎng)頁抓取方法、分布式結(jié)構(gòu)、系統(tǒng)監(jiān)測和數(shù)據(jù)存儲六個關(guān)鍵功能。（2）結(jié)合程序代碼分解說...

vincent_xyb 2019-07-30 14:46 評論0 收藏0
一篇文章搞定前端面試

摘要：客戶端發(fā)送包到服務(wù)器，并進入狀態(tài)，等待服務(wù)器確認。再進一步接收到客戶端的就進入狀態(tài)。通常情況下連接就是連接，因此連接一旦建立通訊雙方開始互發(fā)數(shù)據(jù)進行通信，直到其中一方或雙方斷開連接為止。統(tǒng)一資源定位符。本文旨在用最通俗的語言講述最枯燥的基本知識面試過前端的老鐵都知道，對于前端，面試官喜歡一開始先問些HTML5新增元素啊特性啊，或者是js閉包啊原型啊，或者是css垂直水平居中怎么實現(xiàn)...

ISherry 2019-08-02 11:39 評論0 收藏0