加入收藏 | 设为首页 | 会员中心 | 我要投稿 云计算网_泰州站长网 (http://www.0523zz.com/)- 视觉智能、AI应用、CDN、行业物联网、智能数字人!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

如何使用JavaScript解析URL

发布时间:2019-03-03 08:19:32 所属栏目:优化 来源:前端小智
导读:副标题#e# 在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。 开始 创建一个以下内容的 HTML 文件,并在浏览器中打开。 html head titleJavaScriptURLparsing/title /head body script //激动人心的代码即将写在这里 /scri
副标题[/!--empirenews.page--]

在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。

开始

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

  1. <html>  
  2.     <head>  
  3.         <title>JavaScript URL parsing</title>  
  4.     </head>  
  5.     <body>  
  6.         <script>  
  7.             // 激动人心的代码即将写在这里  
  8.         </script>  
  9.     </body>  
  10. </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。

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

  1. console.log(window.location); 

查看浏览器的控制台:

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

创建 URL 对象

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

  1. var myURL = new URL('https://example.com'); 

就这么简单! 可以打印 myURL 来查看 myURL 的内容:

  1. console.log(myURL); 

如何使用JavaScript解析URL

出于本文的目的,将 myURL 设置为这个值:

  1. 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。

  1. console.log(myURL.href);  
  2. // 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 吧!

  1. console.log(myURL.protocol);  
  2. // Output: "https:" 

主机名(hostname)

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

  1. console.log(myURL.hostname);  
  2. // Output: "example.com" 

端口(port)

URL 的端口号位于域名后面,用冒号分隔(例如 example.com:1234)。 大多数网址都没有端口号,这种情况非常罕见。

(编辑:云计算网_泰州站长网)

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

热点阅读