如何使用 JavaScript 解析 URL

时间 2019-11-09

标签如何使用 javascript 解析 url 栏目 JavaScript 繁體版

原文原文链接

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

为了保证的可读性，本文采用意译而非直译。javascript

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

开始

建立一个如下内容的 HTML 文件，并在浏览器中打开。前端

<html>
    <head>
        <title>JavaScript URL parsing</title>
    </head>
    <body>
        <script>
            // 激动人心的代码即将写在这里
        </script>
    </body>
</html>

若是你想尝试本文中的任何内容，能够将其放在 <script> 标记中，保存，从新加载页面，看看会发生什么！在本教程中，将使用 console.log 来打印所须要的内容，你能够打开开发都工具，来查看内容。java

什么是 URL

这应该是至关简单的，但让咱们说清楚。 URL 是网页的地址，能够在浏览器中输入以获取该网页的惟一内容。能够在地址栏中看到它：git

URL 是统一资源定位符，对能够从互联网上获得的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每一个文件都有一个惟一的 URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。github

此外，若是你不熟悉基本 URL 路径的工做方式，能够查看此文学习。web

URL 不都长的同样的
这是一个快速提醒 - 有时 URL 可能很是奇怪，以下：segmentfault

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

将其复制并粘贴到 <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/...

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎加群互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。