url字符串解析

Mike617 发布于2019-08-23 17:15 / 330人阅读

摘要：众所周知，我们可以通过获得当前页面地址的等属性，但是如果给你一个字符串，怎么得到这些属性呢也许用正则是一个方法。假设有这样一个字符串，该怎么解析它呢。返回的对象有个属性，可以对的部分解析，再也不需要用循环或正则方式获取对象。

众所周知，我们可以通过location获得当前页面地址（URL）的href、protocol、host、search、hash等属性，但是如果给你一个url字符串，怎么得到这些属性呢？也许用正则是一个方法。

假设有这样一个 url 字符串"https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part"，该怎么解析它呢。

~~iframe~~

直接把url赋值给location.href会从当前页面跳转到 url 的页面，如果我们在当前页面新建一个iframe并给它的src赋值这个 url ，似乎可以通过iframe的window.location拿到url的各个属性。

但是很遗憾，对于跨域的url，不会触发iframe的window.onload，直接访问location.href，浏览器也给出提示限制跨域。

提到 url ，可能会有人想到标签，因为我们经常访问页面地址是通过点击a链接跳转的，那么能否通过它来解析 url 呢？

我们创建了一个a元素，并给它的href赋值了 url ，可以打印出这个a元素的对象，其中就包括 url 的这些属性。

并且可以利用它简单判断一个 url 是否是合法的，不合法的 url，host, origin为null

URL

利用a元素来解析 url 算是奇淫巧技吧，其实现代浏览器提供了一个创建的URL对象的构造函数—URL()，直接把url当作参数传入，就会返回一个URL对象。

返回的URL对象有个searchParams属性，可以对 url 的search部分解析，再也不需要用循环或正则方式获取search对象。

var url = "https://demo.vczhan.com/wave/heart-wave.html?name=abc&age=18#part"
var searchParams = new URL(url).searchParams
searchParams.get("name") // abc
searchParams.has("age")  // 18

当然，有个专门处理search的API：URLSearchParams

// {a: 1, b: 2} -> a=1&b=2
new URLSearchParams({a: 1, b: 2}).toString()


// a=1&b=2 -> {a: "1", b: "2"}
var obj ={}
var searchParams = new URLSearchParams("?a=1&b=2")

// searchParams.has("a") // true
// searchParams.get("a") // 1
// searchParams.append("c", "3"); searchParams.toString() // "a=1&b=2&c=3"

for(var [key, value] of searchParams.entries()) {
   obj[key] = value
}
console.log(obj)

更详细的请参考下方链接
URL：https://developer.mozilla.org...
URLSearchParams：https://developer.mozilla.org...

私有云混合云 url解析解析url url链接字符串解析url域名

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

转载请注明本文地址：https://www.ucloud.cn/yun/104040.html

JS 中 URL 编码的问题.

摘要：这些字符是普通字符编码解码的问题既然浏览器会默认给进行编码那么服务器就会默认给解码。 URL 编码为什么要对 URL 编码 1. 避免解析错误我们的 queryString 的形式是使用 ?开始, key=value 传递参数, key-value pairs 之间使用 & 连接.比如: ?postid=5038412&t=1450591802326 服务器会根据 & 解析 ...

lanffy 2019-08-20 17:42 评论0 收藏0
彻底理解从输入URL与页面展现

摘要：五浏览器绘制网页绘制过程主要是结构与样式的结合，以及行为动态效果的展现。之后会写系列文章，欢迎围观主要参考文章基础进阶详解与编码前端面试题从到页面展现，这之中发生了什么图解流程概述：地址栏输入URL ——> 域名解析 ——> 服务器处理请求 ——> 浏览器处理响应 ——> 浏览器绘制网页一.地址栏输入URL 认识URL showImg(https://segmentfault....

abson 2019-08-21 11:41 评论0 收藏0
Angular路由导航的7个步骤

摘要：路由过程的个步骤每次点击链接或浏览器改变时，路由器都会确保应用程序做出相应的反应。一旦所有的都已完成，其返回值是合并的路径的然后路由器继续步骤。你可以使用助记记住路由器经过的步骤的顺序。路由过程的7个步骤每次点击链接或浏览器URL改变时，Angular路由器都会确保应用程序做出相应的反应。为了做到这一点，Angular路由器执行以下7个步骤的顺序：解析(Parse)：它解析...

BLUE 2019-08-21 17:41 评论0 收藏0