怎样运用 JavaScript 剖析 URL

2019年8月31日 205次阅读 来源: 前端小智

在 Web 开辟中，有许多状况须要剖析 URL,这篇重要进修怎样运用 URL 对象完成这一点。

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你！

最先

建立一个以下内容的 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/…

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

交换

干货系列文章汇总以下，以为不错点个Star，迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智，民众号「大迁天下」作者，对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注民众号，背景复兴福利，即可看到福利，你懂的。

《怎样运用 JavaScript 剖析 URL》

    原文作者：前端小智
    原文地址: https://segmentfault.com/a/1190000018108589
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞