编程篇(001)-如何获取浏览器 URL 中查询字符串中的参数？

齐丶先丶森

发布于 2022-05-12 21:15:43

3.7K0

发布于 2022-05-12 21:15:43

文章被收录于专栏：前端面试秘籍前端面试秘籍

首先要知道location是BOM对象之一，既是window对象的属性，又是document对象的属性，即： window.location == document.location 结果为true

location的属性有：

举例：URL为 http://www.example.com:8080/html/index.html?name=aa&age=23#id001

属性	描述	返回值举例
hash	设置或返回从井号(#) 开始的 URL（锚）。	#id001
host	设置或返回主机名+当前 URL 的端口号。	www.example.com:8080
hostname	设置或返回当前 URL 的主机名。	www.example.com
href	设置或返回完整的 URL。	http://www.example.com:8080/html/index.html?name=aa&age=23#id001
pathname	设置或返回当前 URL 的路径部分。	/html/index.html
port	设置或返回当前 URL 的端口号。	8080，如果是默认80端口，返回空字符
protocol	设置或返回当前 URL 的协议。	http
search	设置或返回从问号(?)开始的 URL（查询部分）。	?name=aa&age=23
origin	设置或返回当前 URL 的协议+主机名+端口号。	http://www.example.com:8080

参考答案：

方法一：(基础版)

function getQueryString() {
    var sHref = window.location.href;
    var args = sHref.split("?");
    if (args[0] == sHref) {
        // 没有参数，直接返回空即可
        return "";
    }
    var arr = args[1].split("&");
    var obj = {};
    for (var i = 0; i < arr.length; i++) {
        var arg = arr[i].split("=");
        obj[arg[0]] = arg[1];
    }
    return obj;
}
var href = getQueryString();
console.log(href["categoryId"]);

方法二：(正则版, URL 存在#则不适用)

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
console.log(getQueryString("categoryId"));

方法三：(正则升级版)

function getQueryString(name) {
    // 未传参，返回空
    if (!name) return null;
    // 查询参数：先通过search取值，如果取不到就通过hash来取
    var after = window.location.search;
    after = after.substr(1) || window.location.hash.split("?")[1];
    // 地址栏URL没有查询参数，返回空
    if (!after) return null;
    // 如果查询参数中没有"name"，返回空
    if (after.indexOf(name) === -1) return null;
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    // 当地址栏参数存在中文时，需要解码，不然会乱码
    var r = decodeURI(after).match(reg);
    // 如果url中"name"没有值，返回空
    if (!r) return null;
    return r[2];
}
console.log(getQueryString("categoryId"));

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-09-24，如有侵权请联系 cloudcommunity@tencent.com 删除

php