js 获取url|极客笔记

js 获取url

在Web开发中，经常会遇到需要获取当前页面的URL的情况。通过JavaScript可以很方便地获取当前页面的URL，并对其进行处理。本文将详细介绍如何使用JavaScript获取URL并进行相关操作。

window.location 对象

在JavaScript中，可以使用window.location对象来获取当前页面的URL信息。window.location对象包含了许多与URL相关的属性，比如href、host、protocol等，通过这些属性我们可以获取到URL的各个部分信息。

window.location.href

window.location.href属性可以获取到完整的URL，包括协议、主机、路径以及查询字符串等信息。下面是一个简单的示例代码：

console.log(window.location.href);

运行上述代码，将会输出当前页面的完整URL，例如：https://www.example.com/search?keyword=JavaScript。

window.location.host

window.location.host属性可以获取到当前页面的主机信息，即域名部分。如果URL中包含端口号，则会同时包含端口号信息。下面是一个示例代码：

console.log(window.location.host);

运行上述代码，将会输出当前页面的主机信息，例如：www.example.com。

window.location.protocol

window.location.protocol属性可以获取到当前页面的协议信息，即http://或https://等。下面是一个示例代码：

console.log(window.location.protocol);

运行上述代码，将会输出当前页面的协议信息，例如：https:。

window.location.pathname

window.location.pathname属性可以获取到当前页面的路径部分信息。下面是一个示例代码：

console.log(window.location.pathname);

运行上述代码，将会输出当前页面的路径信息，例如：/search。

window.location.search

window.location.search属性可以获取到当前页面的查询字符串部分信息。下面是一个示例代码：

console.log(window.location.search);

运行上述代码，将会输出当前页面的查询字符串信息，例如：?keyword=JavaScript。

使用正则表达式解析URL参数

在实际开发中，经常需要解析URL中的查询字符串，并获取其中的参数值。可以使用正则表达式来提取URL中的参数信息。下面是一个示例代码：

function getUrlParams(url) {
    var params = {};
    var splitUrl = url.split("?")[1];
    var reg = /([^&=]+)=([^&]*)/g;
    splitUrl.replace(reg, function (match, key, value) {
        params[key] = value;
    });
    return params;
}

var url = "https://www.example.com/search?keyword=JavaScript&page=1";
var params = getUrlParams(url);
console.log(params);

上述代码定义了一个getUrlParams函数，用于提取URL中的参数信息并返回一个包含参数键值对的对象。运行上述代码，将会输出如下结果：