详解URL的组成以及获取URL各部分的方法

浏览器的URL是统一资源定位器 （ Uniform Resource Locator ）的缩写。

一个完整的URL通常由以下几个部分组成：

1. 协议（Protocol）

        URL 的协议部分指示浏览器应该使用哪种协议来获取资源。常见的协议有 http://、https://、ftp:// 等。例如，https://example.com 中的协议是 https://。

2. 域名（Domain） 

        URL 的域名部分标识了要访问的服务器的主机名。域名可以是一个 IP 地址或者一个可读性更好的主机名。例如，https://example.com 中的域名是 example.com。

3. 端口（Port） 

        URL 的端口部分指定了服务器上要使用的端口号。如果未指定端口号，则默认使用协议的默认端口。例如，https://example.com:8080 中的端口是 8080。

4. 路径（Path） 

        URL 的路径部分指定了服务器上要访问的资源的路径。路径以斜杠（/）开头，并根据服务器上的目录结构进行指定。例如，https://example.com/path/to/resource 中的路径是 /path/to/resource。

5. 查询字符串（Query String） 

        URL 的查询字符串部分用于向服务器传递参数和数值。查询字符串以问号（?）开头，参数和数值使用键值对的形式进行表示，多个键值对之间使用与号（&）分隔。例如，https://example.com/page?name=John&age=30 中的查询字符串是 name=John&age=30。

6.片段标识（Fragment Identifier） 

        URL 的片段标识部分用于指定在资源中的特定位置或锚点。片段标识以井号（#）开头，后面跟着标识符。例如，https://example.com/page#section1 中的片段标识是 section1。

 如何用js获取URL中各个部分？

我在vscode中创建了一个HTML文件，用本地服务器打开后如下：

对于测试的URL：

http://127.0.0.1:5501/103002_url.html?name=Jerry&age=18&sex=male#target

1. window.location.href：

URL的整个字符串

本例返回：http://127.0.0.1:5501/103002_url.html?name=Jerry&age=18&sex=male#target

 2. window.location.protocol：

URL 的协议部分

本例返回：http:

 3. window.location.host：

URL 的主机（IP 地址或域名）和端口。

本例返回：127.0.0.1:5501

如果有域名，比如百度（https://www.baidu.com/）就会返回：www.baidu.com

 4. window.location.port 

URL 的端口部分

本例返回：5501

如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符

5. window.location.pathname 

URL 的路径部分

本例返回：/103002_url.html

6. window.location.search 

URL 的参数部分

本例返回：?name=Jerry&age=18&sex=male

7. window.location.hash

URL的锚点

本例返回：#target

 如果帮助到您了，可以留下一个赞👍告诉我