整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
Web 开发中，有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。
开始
创建一个以下内容的 HTML 文件，并在浏览器中打开。
<html> <head> <title>JavaScript URL parsing</title> </head> <body> <script> // 激动人心的代码即将写在这里 </script> </body> </html>
如果你想尝试本文中的任何内容，可以将其放在 <script> 标记中，保存，重新加载页面，看看会发生什么！ 在本教程中，将使用 console.log 来打印所需要的内容，你可以打开开发都工具，来查看内容。
什么是 URL
这应该是相当简单的，但让我们说清楚。 URL 是网页的地址，可以在浏览器中输入以获取该网页的唯一内容。 可以在地址栏中看到它：
URL 是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。
此外，如果你不熟悉基本 URL 路径的工作方式，可以查看此文学习。
URL 不都长的一样的
这是一个快速提醒 - 有时 URL 可能非常奇怪，如下：
:1234/page/?a=b
file:///Users/username/folder/file.png
获取当前URL
获取当前页面的 URL 非常简单 - 我们可以使用 window.location。
试着把这个添加到我们形如写的的脚本中:
console.log(window.location);
查看浏览器的控制台：
不是你想要的?这是因为它不返回你在浏览器中看到的实际 URL 地址——它返回的是一个 URL 对象。使用这个 URL 对象，我们可以解析 URL 的不同部分，接下来就会讲到。
创建 URL 对象
很快就会看到，可以使用 URL 对象来了解 URL 的不同部分。如果你想对任何 URL 执行此操作，而不仅仅是当前页面的 URL，该怎么办？ 我们可以通过创建一个新的 URL 对象来实现。 以下是如何创建一个：
var myURL = new URL('https://example.com');
就这么简单！ 可以打印 myURL 来查看 myURL 的内容：
console.log(myURL);
出于本文的目的，将 myURL 设置为这个值：
var myURL = new URL('https://example.com:4000/folder/page.html?x=y&a=b#section-2')
将其复制并粘贴到 <script> 元素中，以便你可以继续操作！ 这个 URL 的某些部分可能不熟悉，因为它们并不总是被使用 - 但你将在下面了解它们，所以不要担心！
URL 对象的结构
使用 URL 对象，可以非常轻松地获取 URL 的不同部分。 以下是你可以从 URL 对象获得的所有内容。 对于这些示例，我们将使用上面设置的 myURL。
href
URL 的 href 基本上是作为字符串(文本)的整个 URL。如果你想把页面的 URL 作为字符串而不是 URL 对象，你可以写 window.location.href。
console.log(myURL.href); // Output: "https://example.com:4000/folder/page.html?x=y&a=b#section-2"
协议 (protocol)
URL的协议是一开始的部分。这告诉浏览器如何访问该页面，例如通过 HTTP 或 HTTPS。 但是还有很多其他协议，比如 ftp（文件传输协议）和 ws（WebSocket）。通常，网站将使用 HTTP 或 HTTPS。
虽然如果你的计算机上打开了文件，你可能正在使用文件协议！ URL对象的协议部分包括：，但不包括 //。 让我们看看 myURL 吧！
console.log(myURL.protocol); // Output: "https:"
主机名（hostname）
主机名是站点的域名。 如果你不熟悉域名，则它是在浏览器中看到的URL的主要部分 - 例如 google.com 或codetheweb.blog。
console.log(myURL.hostname); // Output: "example.com"
端口（port）
URL 的端口号位于域名后面，用冒号分隔（例如 example.com:1234）。 大多数网址都没有端口号，这种情况非常罕见。
端口号是服务器上用于获取数据的特定“通道” - 因此，如果我拥有 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 的中参数
方法一：正则法
function getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
// 这样调用：
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
方法二：split拆分法
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strstrs = str.split("&");
for(var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
var Request = new Object();
Request = GetRequest();
// var 参数1,参数2,参数3,参数N;
// 参数1 = Request['参数1'];
// 参数2 = Request['参数2'];
// 参数3 = Request['参数3'];
// 参数N = Request['参数N'];
修改 URL 的中某个参数值
般我们日常在上网的时候，会在浏览器的地址栏里输入一个网站的 "网址"，点击下回车，就会跳到你想去的网站，就类似这样
但其实，叫做 "网址" 并不是特别的准确，确切地说，应该叫做 URL
那到底啥是 URL 呢？ 不就是一个网址吗？
URL 是英文 Uniform Resource Locator 的缩写，即统一资源定位器，是因特网上用于指定信息位置的表示方法，通过它就能找到网上的某个你要的资源
虽然我们平时使用浏览器的时候，只要输入baidu.com或者qq.com就能正常上网了，但其实我们输入的只是整个URL中的一小部分
来，我先看看一个相对完整的URL的整体结构是怎么样的
这里大致分了几个部分，我们一个个来看，它们具体是干什么的
图中http://这部分就是协议部分，即指定了URL是以什么协议发送网络请求的
常见的协议如：http://、https://、ftp://、file://，比如: http://就是超文本传输协议，平时上网大多用这个协议，https://是以安全为目标的HTTP协议。
图中localhost就是地址部分，用来确定URL所要访问的服务器的网络地址（也就是网址）。在URL中，地址可以用三个形式来表示：域名、主机名、IP地址
我们平时输入的www.baidu.com、www.qq.com就是域名，域名也分一级域名、二级域名、以及顶级域名。
不过，域名也只是一串文字，计算机和路由器并不能直接认出它，还需要通过DNS服务器找到域名对应的IP地址，再通过底层的TCP/IP协议路由到对应的机器上去 （这些内容不是本文的重点暂时略过，先挖个坑再说）
主机名就是某台计算机的名字，在一个局域网内，可以通过主机名找到你要访问的计算机。主机名和域名一样，计算机和路由器不认它，需要通过HOSTS文件这样的技术找到主机名和IP地址的关联关系，最后还是翻译成IP地址再继续发送网络请求
图中的localhost也是主机名，但是一种比较特殊的主机名，是给 回环地址的一个标准主机名，就是代表本机自己的地址。
在URL中也可以直接用IP地址来代替域名或主机名，如192.168.0.1，关于IP地址的相关知识点放到以后再讲（继续挖坑）
图中在冒号:后面的那串数字8080就是端口号，一台服务器上可以开多个端口号，往往一个网络服务程序就对应一个端口号
比如，我在机器 A 上，开了两个服务程序，分别是 Tomcat和SSH，让它们分别关联端口8080和22，那URL中如果端口号是8080就是会访问到Tomcat程序，22就会连接SSH服务。
但可能有小伙伴会有疑问：诶，我平时上百度看到的URL是http://www.baidu.com没看到有端口号啊
其实是有的，端口号是80，只是它被隐藏起来了，我们看不到而已，而这个80端口也就是URL的默认端口号
但不是所有URL的默认端口号都是80，如果协议是http://，默认端口号为80，但若是https://协议，默认端口号就是443了
从第一个斜杠/开始，到最后一个斜杠/结束的那部分，也就是图中/app/user/那部分即为虚拟目录
它就类似我们电脑中文件目录的格式，第一个/为根目录，每多一个/就多进入一层目录
从域名后开始算起的最后一个斜杠/开始，到?为止，没有?则到#为止，或者?和#都没有就是到整个URL结束为止的那部分就为文件名
说起来很绕吧，其实就是图中 info.do 这部分，它一般包含文件名和扩展名('.'后面那部分)，用来指代一个URL所访问的具体文件或资源，它可以是图片、html文件、css文件，也可以是js文件、字体文件等等，它也可以不是某种文件，而是服务端后台执行的某段程序。
甚至可以省略不写虚拟目录和文件名，因为它们本来就不是必须的，就如http://www.baidu.com这样的URL就没有文件名，但服务器会在缺省的情况下给你定位到某个特定的文件或程序上去。
从?后到#结束，即图中的?uid=101&ty=2为查询参数
查询参数，也称为URL参数、查询字符串，英文名为 Query，它是用来向服务端以字符串的形式传递参数和少数数据用的
其参数形式一般都以多个键值对的形式进行表示，如 a=1、b=2就是两个键值对，键为"a"和"b"，值为对应的"1"和"2", 多个键值对应&连起来：a=1&b=2
但参数要传递的某些值往往带有特殊字符，这些字符和URL标准的格式冲突，比如要传a&b这样字符串，和查询参数键值对的连接符&冲突了，若不加以区分就会产生歧义
而最简单的办法，就是对参数值进行编码，称为 URL Encoding，通过编码，a&b变成了a%26b，就不再包含会冲突的特殊字符
而有些参数即便有特殊字符，也不会被编码，除非自行强制编码，比如URL中参数值是另外一串URL，就可以写成 http://localhost/do?url=http://www.baidu.com
这种特殊情况不会有歧义，因为计算机系统认得出参数是另一串URL，就会按URL的形式来解析，但当子URL又包含子参数和多子键值对的时候也难免会分不清参数到底是儿子的还是父亲的，这时还是强制编码的好
URL的参数是一个个键值对，即一个key对应一个value，那如果是一个key要传递多个值，也就是一个列表咋办？也好办
URL的参数名是可以重复的，比如a=1&a=2&a=3,这里穿了3个参数名都为a的查询参数，是完全可以的，可以利用这种特性，按顺序将 1、2、3作为参数a的列表值
为了表示更清楚点，一般都会在列表参数名后面加上一对方括号[]，如：a[]=1&a[]=2&a[]=3
但是，对于URL参数的写法和格式的标准，也没有特别严格的规定，以上几种形式一般都会支持
图中#后面那部分字符串，#abc就是锚部分
锚，英文称做Reference，通常也是用来传递参数等信息，但与查询参数的本质区别就是这部分内容不会被传递到服务器端
锚一般用于页面，比如在浏览网页的时候，按个按钮突然帮你定位到页首或页面中的某个位子去了，这就是锚
现在随着前后端分离技术，尤其是 vue、reactjs 等前端框架的兴起，锚作为前端javascript程序处理的参数载体也越来越重要了
URL看似已经习以为常、非常简单的东西，背后往往也隐藏着很多技术细节和知识点，甚至这短短一篇文章也没办法穷尽
其实URL的内容还有不少，比如<用户名>@<密码>这种用户验证信息在URL中的传递，由于篇幅的关系还没有讲到
所以我讲分几篇文章来讲解HTTP协议的其中几个重要部分，如果这一系列文章对你有帮助，别忘了关注哦~
发送HTTP请求：首先，你需要向目标网页发送HTTP请求以获取其HTML内容。这可以通过Java的内置库java.net.HttpURLConnection或者使用更高级的库如Apache Http Client OkHttp等来完成。
·读取响应内容：一旦你发送了请求并收到了响应，你需要读取响应的内容，这通常是HTML格式的字符串。
·解析HTML：然后，你需要解析HTML字符串以提取所需的信息，这可以通过正则表达式来完成。但通常建议使用专门的HTML解析库，如Jsoup。Jsoup提供了一种非常方便的方式来解析HTML文档，并可以通过类似于CSS或jQuery的选择器语法来提取和操作数据。
·如果你需要处理更复杂的网页或进行更高级的网页抓取和解析任务，你可能还需要考虑使用如Selenium这样的浏览器自动化工具来模拟真实的浏览器行为。但是请注意，频繁或大规模地抓取网页可能会违反网站的使用条款甚至可能构成法律问题。
*请认真填写需求信息，我们会在24小时内与您取得联系。
