使用JavaScript解析URL的方法示例

网络编程 2024/12/31 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

前言

在 Web 开发中，有许多情况需要解析 URL,这篇主要学习如何使用 URL 对象实现这一点。下面话不多说了，来一起看看详细的介绍吧

开始

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

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

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

什么是 URL

这应该是相当简单的，但让我们说清楚。 URL 是网页的地址，可以在浏览器中输入以获取该网页的唯一内容。可以在地址栏中看到它：

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

此外，如果你不熟悉基本 URL 路径的工作方式，可以查看此文学习。

URL 不都长的一样的

这是一个快速提醒 - 有时 URL 可能非常奇怪，如下：

https://example.com:1234/page/"color: #ff0000">获取当前URL

获取当前页面的 URL 非常简单 - 我们可以使用 window.location。

试着把这个添加到我们形如写的的脚本中:

console.log(window.location);

查看浏览器的控制台：

不是你想要的"color: #ff0000">创建 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"color: #ff0000">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"htmlcode">

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 从域名的最后一个 “/” 开始到 “"htmlcode">

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 查询参数的示例：


"htmlcode">

console.log(myURL.search);
// Output: ""


但是，如果我们想要拆分它们并获取它们的值，那就有点复杂了。
使用 URLSearchParams 解析查询参数


要解析查询参数，我们需要创建一个 URLSearchParams 对象，如下所示：


var searchParams = new URLSearchParams(myURL.search);


然后可以通过调用 searchParams.get（'key'）来获取特定键的值。 使用我们的示例网址 - 这是原始搜索参数：


"htmlcode">

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/
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。

                                
                                
                                    js解析url,js解析url,pathname 
                                
                                    标签：
                                        js解析url,js解析url,pathname
                                     

                                蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“使用JavaScript解析URL的方法示例”

暂无使用JavaScript解析URL的方法示例的评论...

www.hbtsch.com 蝙蝠岛资源网

139,976影音资源

144,792福利资源

21,817软件资源

631,128技术资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

2024年12月31日

使用JavaScript解析URL的方法示例

js解析url,js解析url,pathname

VUE引入第三方js包及调用方法讲解

可能被忽略的一些JavaScript数组方法细节

评论“使用JavaScript解析URL的方法示例”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接