js深度解析url地址

wayneli 發布于2019-08-21 14:14 / 1206人閱讀

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

“站在巨人的肩膀上”

靈感來源：

https://segmentfault.com/a/1190000004601319

和

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

上面一個地址，可以讓你學到如何解析一個url地址，從中解析出每一個參數內容
第二個鏈接的問題就是參數中的鍵值對出現了==號，這是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;
        })()
    };
}

調用方法：

location.href.parseURL();

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

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

GPU云服務器云服務器 js解析url url解析解析url url地址

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87820.html

深度解析之異步加載和預加載

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

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

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

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

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

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

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

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

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

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