如何使用JavaScript解析URL

端口号是服务器上用于获取数据的特定“通道” - 因此，如果我拥有 example.com，我可以在多个不同的端口上发送不同的数据。 但通常域名默认为一个特定端口，因此不需要端口号。 来看看 myURL 的端口号：

console.log(myURL.port);  
// Output: "4000" 

主机（host）

主机只是主机名和端口放在一起，尝试获取 myURL 的主机：

console.log(myURL.host);  
// Output: "example.com:4000" 

来源（origin）

origin 由 URL 的协议，主机名和端口组成。 它基本上是整个 URL，直到端口号结束，如果没有端口号，到主机名结束。

console.log(myURL.origin);  
// Output: "https://example.com:4000" 

pathname（文件名）

pathname 从域名的最后一个 “/” 开始到 “?” 为止,是文件名部分,如果没有 “?” ,则是从域名最后的一个 “/” 开始到 “#” 为止 , 是文件部分, 如果没有 “?” 和 “#” , 那么从域名后的最后一个 “/” 开始到结束 , 都是文件名部分。

console.log(myURL.pathname);  
// Output: "/folder/page.html" 

锚点（hash）

从 “#” 开始到最后，都是锚部分。可以将哈希值添加到 URL 以直接滚动到具有 ID 为该值的哈希值 的元素。 例如，如果你有一个 id 为 hello 的元素，则可以在 URL 中添加 #hello 就可以直接滚动到这个元素的位置上。通过以下方式可以在 URL 获取 “#” 后面的值:

console.log(myURL.hash);  
// Output: "#section-2" 

查询参数 (search)

你还可以向 URL 添加查询参数。它们是键值对，意味着将特定的“变量”设置为特定值。 查询参数的形式为 key=value。 以下是一些 URL 查询参数的示例：

?key1=value1&key2=value2&key3=value3 

请注意，如果 URL 也有 锚点（hash），则查询参数位于 锚点（hash）(也就是 ‘#’)之前，如我们的示例 URL 中所示：

console.log(myURL.search);  
// Output: "?x=y&a=b" 

但是，如果我们想要拆分它们并获取它们的值，那就有点复杂了。

使用 URLSearchParams 解析查询参数

要解析查询参数，我们需要创建一个 URLSearchParams 对象，如下所示：

var searchParams = new URLSearchParams(myURL.search); 

然后可以通过调用 searchParams.get（'key'）来获取特定键的值。 使用我们的示例网址 - 这是原始搜索参数：

?x=y&a=b 

因此，如果我们调用 searchParams.get（'x'），那么它应该返回 y，而 searchParams.get（'a'）应该返回 b，我们来试试吧！

console.log(searchParams.get('x'));  
// Output: "y"  
console.log(searchParams.get('a'));  
// Output: "b" 

扩展

获取 URL 的中参数

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!