使用DOM原生能力解析URL

举报
四大饿人 发表于 2017/12/31 22:09:58 2017/12/31
【摘要】 我们知道浏览器location对象包含有关当前 URL 的信息,如下属性描述hash设置或返回从井号 (#) 开始的 URL(锚)。host设置或返回主机名和当前 URL 的端口号。hostname设置或返回当前 URL 的主机名。href设置或返回完整的 URL。pathname设置或返回当前 URL 的路径部分。port设置或返回当前 URL 的端口号。protocol设置或返回当前 URL

我们知道浏览器location对象包含有关当前 URL 的信息,如下


属性描述
hash设置或返回从井号 (#) 开始的 URL(锚)。
host设置或返回主机名和当前 URL 的端口号。
hostname设置或返回当前 URL 的主机名。
href设置或返回完整的 URL。
pathname设置或返回当前 URL 的路径部分。
port设置或返回当前 URL 的端口号。
protocol设置或返回当前 URL 的协议。
search设置或返回从问号 (?) 开始的 URL(查询部分)。
origin返回域


但在实际生产中,我们拿到了一个URL,只想获取里面的一部分属性,这个时候我们通常使用正则式匹配的方式或者关键字识别的方式来截取,来达到这一目的。今天在这里我要介绍的是一种讨巧的方式,利用DOM的原声能力来实现,直接上代码:

code.PNG


使用示例:

example.PNG


日志结果如下:

#hash www.example.com:80 www.example.com https://www.example.com:80/a/b/c.html?a=1&b=2#hash /a/b/c.html 80 https: ?a=1&b=2 https://www.example.com:80


用这种方式实现的解析结果跟BOM 的location属性一致,某种程度上讲,工程性更好一些。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。