使用JavaScript解析网址的方法示例

前言

在Web开发中，有很多情况需要解析URL。本文主要研究如何使用URL对象来实现这一点。下面就不多说了，我们来看看详细的介绍

开始

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

Html头部标题JavaScript URL解析/标题/头部正文脚本//激动人心的代码将写在这里/脚本/正文/html如果你想尝试这篇文章中的任何东西，你可以把它放在脚本标签中，保存并重新加载页面，看看会发生什么！在本教程中，您将使用console.log打印所需的内容，并且可以打开开发工具来查看内容。

什么是网址

这应该很简单，但我们要清楚。网址是网页的地址，可以在浏览器中输入，以获得网页的唯一内容。您可以在地址栏中看到：

URL是一个统一的资源定位符，是互联网上可用资源的位置和访问方法的简明表示，也是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的网址，其中包含指示文件位置和浏览器应该如何处理它的信息。

此外，如果你不熟悉基本的网址路径是如何工作的，你可以查看这篇文章来学习。

URL看起来并不都一样

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

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

http://localhost/page.html

https://154 . 23 . 54 . 156/页？x=.

文件：////用户/用户名/文件夹/文件. png

获取当前网址

获取当前页面的网址非常简单——我们可以使用窗口.

尝试将此添加到我们的书面脚本：中

console . log(window . location)；要查看浏览器的控制台：

不是你想要的？这是因为它没有返回您在浏览器中看到的实际网址——，但它返回了一个网址对象。使用这个URL对象，我们可以解析URL的不同部分，这将在接下来讨论。

创建网址对象

正如您将很快看到的，您可以使用URL对象来理解URL的不同部分。如果您想在任何网址上这样做，而不仅仅是当前页面的网址，该怎么办？我们可以通过创建一个新的URL对象来做到这一点。以下是如何创建一个：

var myURL=新URl(' https://example.com ')；就这么简单！您可以打印我的网址来查看我的网址的内容：

console . log(my URl)；

出于本文的目的，将我的URL设置为该值：

var myURl=new URl(' https://example.com :4000/folder/page . html？x=ya=b # section-2’)复制粘贴到脚本元素中，这样就可以继续操作了！这个网址的某些部分可能不熟悉，因为它们并不总是被使用——但是你会在下面了解到它们，所以不要担心！

网址对象的结构

使用网址对象，很容易得到网址的不同部分。以下是您可以从网址对象中获得的所有内容。对于这些例子，我们将使用上面设置的myURL。

超链接

网址的href基本上是整个网址的字符串(文本)。如果你想用一个网页的网址作为一个字符串而不是一个网址对象，你可以写

console . log(myURl . href)；//Output : https://example.com :4000/folder/page . html？X=ya=b #第2节协议

网址协议是开始部分。这告诉浏览器如何访问页面，例如，通过HTTP或HTTPS。但是还有很多其他的协议，比如ftp(文件传输协议)和ws(网络套接字)。通常，网站会使用HTTP或HTTPS。

尽管如果文件在您的计算机上打开，您可能正在使用文件协议！URL对象的协议部分包括：但不包括//。来看看我的URL吧！

console . log(my URl . protocol)；//Output: 'https: '主机名

主机名是站点的域名。如果你不熟悉域名，它是你在浏览器中看到的网址的主要部分——例如，google.com或codetheweb.blog

console . log(my URl . hostname)；//Output: 'example.com '端口(port)

URL的端口号位于域名之后，用冒号分隔(例如.com:1234)。大多数网站没有端口号，这是非常罕见的。

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

console . log(my URl . port)；//输出： '4000 '主机

主机只是主机名和端口加在一起，试图得到我的URL的主机：

console . log(my URl . host)；//output : ' example.com :4000 '来源(origin)

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

console . log(my URl . origin)；//输出： https://example.com :4000路径名(文件名)

路径名从域名的最后一个“/”开始到“？”到目前为止，是文件名部分，如果没有“？”，它从域名的最后一个“/”开始，以“#”结束，这是文件部分。如果没有“？”而“#”，则从域名后的最后一个“/”到最后，它就是文件名部分。

console . log(my URl . pathname)；//output : '/folder/page . html '锚点(hash)

从“#”到结尾，都是锚定部分。您可以向网址添加哈希值，以直接滚动到具有哈希值的元素，该元素的标识就是该值。例如，如果您有一个id为hello的元素，您可以将#hello添加到URL，并直接滚动到该元素的位置。“#”后的值：可以通过以下方式在URL中获取

console . log(my URl . hash)；//Output: '#section-2 '查询参数(搜索)

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

？key 1=value 1 key 2=value 2 key 3=value 3请注意，如果URL也有一个锚点(hash)，查询参数位于锚点(hash)之前(即，' # ')，如我们的示例URL所示：

console . log(my URl . search)；//Output: '？X=ya=b '但是如果我们想要拆分它们并得到它们的值，这就有点复杂了。

使用URLSearchParams解析查询参数

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

var search params=new URL search params(my URl . search)；然后，您可以通过调用searchParams.get('key ')来获取特定键的值。使用我们的示例网址——这是原始搜索参数：

？X=ya=b因此，如果我们调用searchParams.get('x ')，它应该返回y，而searchParams.get('a ')应该返回b，让我们试试！

console . log(search params . get(' x '))；//Output : ' y ' console . log(search params . get(' a '))；//Output: 'b '扩展名

获取网址中的参数

方法1:正则化方法

函数getQueryString(name) { var reg=新RegExp('(^|)'名称'=([^]*)(|$)'，' I ')；var r=window . location . search . substr(1)。match(reg)；if (r！=null){ return unescape(r[2])；}返回null}//调用这个：alert(GetQueryString('参数名1 ')；Alert(GetQueryString('参数名2 ')；Alert(GetQueryString('参数名3 ')；方法二：拆分拆分法

函数GetRequest(){ var URL=location . search；//get '？'以下字符串变量=新对象()；if (url.indexOf('？') !=-1){ var str=URL . substr(1)；strs=str . split(')；for(var I=0；i strs.lengthI){ Terquest[strs[I]。split('=')[0]]=unescape(strs[I]。split('=')[1])；} }返回theRequest} var Request=new Object()；request=GetRequest()；//var参数1、参数2、参数3、参数n；//参数1=请求['参数1 ']；//参数2=请求['参数2 ']；//参数3=请求['参数3 ']；//参数N=请求['参数N ']；修改网址中的参数值

//替换指定传入参数的值，其中paramName是参数，replaceWith是新的值函数replacearamval (paramname，replacewith) {varourl=this。location . href . tostring()；var re=eval('/(' param name '=)([^]*)/gi' ')；var nUrl=oUrl.replace(re，param name '=' replace with)；this.location=nUrl原文：https://codetheweb.blog/2019/01/21/javascript-url-parsing/

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。