使用DOM原生能力解析URL
【摘要】 我们知道浏览器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的原声能力来实现，直接上代码:
使用示例：
日志结果如下：
#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）