js深度解析url地址

wayneli 发布于2019-08-21 14:14 / 1077人阅读

摘要：站在巨人的肩膀上灵感来源和上面一个地址，可以让你学到如何解析一个地址，从中解析出每一个参数内容第二个链接的问题就是参数中的键值对出现了号，这是信息，如果再用切割，就会出问题，这里就改版了一下调用方法上面故意把参数写的很乱，为了测试，如果上面

“站在巨人的肩膀上”

灵感来源：

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地址

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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