资讯专栏INFORMATION COLUMN

如何使用 JavaScript 解析 URL

Zachary / 2491人阅读

摘要:端口的端口号位于域名后面,用冒号分隔例如。大多数网址都没有端口号,这种情况非常罕见。但通常域名默认为一个特定端口,因此不需要端口号。它基本上是整个,直到端口号结束,如果没有端口号,到主机名结束。

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

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!

开始

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


    
        JavaScript URL parsing
    
    
        
    


如果你想尝试本文中的任何内容,可以将其放在

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);

查看浏览器的控制台:

不是你想要的?这是因为它不返回你在浏览器中看到的实际 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")

将其复制并粘贴到

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102069.html

相关文章

  • js模版引擎介绍

    摘要:使用方法编译模板并根据所给的数据立即渲染出结果仅编译模版暂不渲染,它会返回一个可重用的编译后的函数根据给定的数据,对之前编译好的模板进行数据渲染参考资料模板引擎概述 js模版引擎介绍 JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法,但通常是非常简单的,一个要注意的有趣的点是,替换标记通常是由双花括号({ {……} })表示,这也...

    duan199226 评论0 收藏0
  • CSS和网络性能

    摘要:对于性能来说真的非常糟糕。的推出使网页性能提高了大约,所有这些都不需要开发人员参与。这意味着和中的存在错误。将放在中这个最终策略是一个相对较新的策略,对感知性能和渐进式渲染有很大好处。 CSS对于呈现页面至关重要 - 在找到,下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其加载到用户的设备上。 关键路径上的任何延迟都会影响我们的开始渲染并让用户看到空白屏幕。...

    chanthuang 评论0 收藏0
  • CSS和网络性能

    摘要:对于性能来说真的非常糟糕。的推出使网页性能提高了大约,所有这些都不需要开发人员参与。这意味着和中的存在错误。将放在中这个最终策略是一个相对较新的策略,对感知性能和渐进式渲染有很大好处。 CSS对于呈现页面至关重要 - 在找到,下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其加载到用户的设备上。 关键路径上的任何延迟都会影响我们的开始渲染并让用户看到空白屏幕。...

    techstay 评论0 收藏0
  • 【译】Excess-XSS 一份关于 XSS 的综合教程

    摘要:示例攻击如何进行下图展示了攻击者如何进行攻击攻击者利用网站的表单插入恶意字符串到网站数据库中。恰恰相反,至少有两种常见的方式,会导致受害者发起针对自己的反射型攻击。攻击者精心构造了一个包含恶意字符串的,将其发送给受害者。 原文地址:http://excess-xss.com/。如有翻译不当之处,欢迎指出 :D 分为四部分: 概述 XSS 攻击 XSS 防御 总结 第一部分:概述 X...

    timger 评论0 收藏0
  • 2019年前端面试题-03

    摘要:前端示例服务器端代码可靠的实例添加回调函数拼接传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法出错处理使用示例欢迎阅读年前端面试题年前端面试题年前端笔试题我是,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。 let与var的区别? Let为ES6新添加申明变量的命令,它类似于var,但是有以下不同: 1、var声明的变量,其作用域为该语句所在的函数内,且存在变量提...

    王岩威 评论0 收藏0

发表评论

0条评论

Zachary

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<