摘要:端口的端口号位于域名后面,用冒号分隔例如。大多数网址都没有端口号,这种情况非常罕见。但通常域名默认为一个特定端口,因此不需要端口号。它基本上是整个,直到端口号结束,如果没有端口号,到主机名结束。
在 Web 开发中,有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。
想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你!
开始创建一个以下内容的 HTML 文件,并在浏览器中打开。
JavaScript URL parsing
如果你想尝试本文中的任何内容,可以将其放在
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 非常简单 - 我们可以使用 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")
将其复制并粘贴到 元素中,以便你可以继续操作! 这个 URL 的某些部分可能不熟悉,因为它们并不总是被使用 - 但你将在下面了解它们,所以不要担心!
URL 对象的结构使用 URL 对象,可以非常轻松地获取 URL 的不同部分。 以下是你可以从 URL 对象获得的所有内容。 对于这些示例,我们将使用上面设置的 myURL。
hrefURL 的 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/...
你的点赞是我持续分享好东西的动力,欢迎点赞!
交流干货系列文章汇总如下,觉得不错点个Star,欢迎 加群 互相学习。
https://github.com/qq44924588...
我是小智,公众号「大迁世界」作者,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!
关注公众号,后台回复福利,即可看到福利,你懂的。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/102069.html
摘要:使用方法编译模板并根据所给的数据立即渲染出结果仅编译模版暂不渲染,它会返回一个可重用的编译后的函数根据给定的数据,对之前编译好的模板进行数据渲染参考资料模板引擎概述 js模版引擎介绍 JavaScript 模板是将 HTML 结构从包含它们的内容中分离的方法。模板系统通常会引入一些新语法,但通常是非常简单的,一个要注意的有趣的点是,替换标记通常是由双花括号({ {……} })表示,这也...
摘要:对于性能来说真的非常糟糕。的推出使网页性能提高了大约,所有这些都不需要开发人员参与。这意味着和中的存在错误。将放在中这个最终策略是一个相对较新的策略,对感知性能和渐进式渲染有很大好处。 CSS对于呈现页面至关重要 - 在找到,下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其加载到用户的设备上。 关键路径上的任何延迟都会影响我们的开始渲染并让用户看到空白屏幕。...
摘要:示例攻击如何进行下图展示了攻击者如何进行攻击攻击者利用网站的表单插入恶意字符串到网站数据库中。恰恰相反,至少有两种常见的方式,会导致受害者发起针对自己的反射型攻击。攻击者精心构造了一个包含恶意字符串的,将其发送给受害者。 原文地址:http://excess-xss.com/。如有翻译不当之处,欢迎指出 :D 分为四部分: 概述 XSS 攻击 XSS 防御 总结 第一部分:概述 X...
摘要:前端示例服务器端代码可靠的实例添加回调函数拼接传递的是一个匿名的回调函数,要执行的话,暴露为一个全局方法出错处理使用示例欢迎阅读年前端面试题年前端面试题年前端笔试题我是,年轻的前端攻城狮一枚,爱专研,爱技术,爱分享。 let与var的区别? Let为ES6新添加申明变量的命令,它类似于var,但是有以下不同: 1、var声明的变量,其作用域为该语句所在的函数内,且存在变量提...
阅读 3370·2021-11-22 09:34
阅读 2856·2021-10-09 09:43
阅读 1444·2021-09-24 09:47
阅读 2198·2019-08-30 12:53
阅读 997·2019-08-29 14:00
阅读 3355·2019-08-29 13:17
阅读 2268·2019-08-28 18:00
阅读 1283·2019-08-26 12:00