使用JavaScript解析URL的方法示例


Posted in Javascript onMarch 01, 2019

前言

在 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/

总结

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

Javascript 相关文章推荐
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
关于Javascript回调函数的一个妙用
Aug 29 Javascript
AngularJS 中ui-view传参的实例详解
Aug 25 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
three.js实现圆柱体
Dec 30 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
js实现录音上传功能
Nov 22 Javascript
可能被忽略的一些JavaScript数组方法细节
Feb 28 #Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 #Javascript
Javascript删除数组里的某个元素
Feb 28 #Javascript
vue强制刷新组件的方法示例
Feb 28 #Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 #Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 #jQuery
Vue多组件仓库开发与发布详解
Feb 28 #Javascript
You might like
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
js对象基础实例分析
2015/01/13 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python交互式图形编程实例(二)
2017/11/17 Python
pandas.DataFrame 根据条件新建列并赋值的方法
2018/04/08 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python3获取电脑IP、主机名、Mac地址的方法示例
2019/04/11 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
pycharm中import呈现灰色原因的解决方法
2020/03/04 Python
HTML5 常见面试题之PC端和移动端区别介绍
2018/01/22 HTML / CSS
牵手50新加坡:专为黄金岁月的单身人士而设的交友网站
2020/08/16 全球购物
业务主管岗位职责范本
2013/12/25 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
学校实习推荐信
2015/03/27 职场文书
公诉意见书范文
2015/06/05 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
SQL Server中锁的用法
2022/05/20 SQL Server