欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

使用JavaScript解析URL的方法示例

程序员文章站 2022-07-04 21:48:40
前言 在 web 开发中，有许多情况需要解析 url,这篇主要学习如何使用 url 对象实现这一点。下面话不多说了，来一起看看详细的介绍吧 开始 创建一个以下内容...

前言

在 web 开发中，有许多情况需要解析 url,这篇主要学习如何使用 url 对象实现这一点。下面话不多说了，来一起看看详细的介绍吧

开始

创建一个以下内容的 html 文件，并在浏览器中打开。

<html>
 <head>
 <title>javascript url parsing</title>
 </head>
 <body>
 <script>
  // 激动人心的代码即将写在这里
 </script>
 </body>
</html>

如果你想尝试本文中的任何内容，可以将其放在 <script> 标记中，保存，重新加载页面，看看会发生什么！ 在本教程中，将使用 console.log 来打印所需要的内容，你可以打开开发都工具，来查看内容。

什么是 url

这应该是相当简单的，但让我们说清楚。 url 是网页的地址，可以在浏览器中输入以获取该网页的唯一内容。 可以在地址栏中看到它：

使用JavaScript解析URL的方法示例

url 是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的 url，它包含的信息指出文件的位置以及浏览器应该怎么处理它。

此外，如果你不熟悉基本 url 路径的工作方式，可以查看学习。

url 不都长的一样的

这是一个快速提醒 - 有时 url 可能非常奇怪，如下：

https://example.com:1234/page/?a=b

http://localhost/page.html

https://154.23.54.156/page?x=...

file:///users/username/folder/file.png

获取当前url

获取当前页面的 url 非常简单 - 我们可以使用 window.location。

试着把这个添加到我们形如写的的脚本中:

console.log(window.location);

查看浏览器的控制台：

使用JavaScript解析URL的方法示例

不是你想要的?这是因为它不返回你在浏览器中看到的实际 url 地址——它返回的是一个 url 对象。使用这个 url 对象，我们可以解析 url 的不同部分，接下来就会讲到。

创建 url 对象

很快就会看到，可以使用 url 对象来了解 url 的不同部分。如果你想对任何 url 执行此操作，而不仅仅是当前页面的 url，该怎么办？ 我们可以通过创建一个新的 url 对象来实现。 以下是如何创建一个：

var myurl = new url('https://example.com');

就这么简单！ 可以打印 myurl 来查看 myurl 的内容：

console.log(myurl);

使用JavaScript解析URL的方法示例

出于本文的目的，将 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);
 strs = 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 的中某个参数值

//替换指定传入参数的值,paramname为参数,replacewith为新值
function replaceparamval(paramname,replacewith) {
 var ourl = this.location.href.tostring();
 var re=eval('/('+ paramname+'=)([^&]*)/gi');
 var nurl = ourl.replace(re,paramname+'='+replacewith);
 this.location = nurl;
　　window.location.href=nurl
}

原文：https://codetheweb.blog/2019/01/21/javascript-url-parsing/

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

上一篇： Php连接及读取和写入mysql数据库的常用代码

下一篇： NodeJS处理Express中异步错误

推荐阅读