js获取 url 参数值的方法总结

简介: js获取 url 参数值的方法总结

今天小编碰到一个朋友问这么一个问题,怎么在一个页面中获取另外一个页面url传过来的参数呢?最初一开始很本能的想到了用 split("?"),这样一步步的分解出需要的参数。但是想了一下,这样写起来比较绕,也不易懂,肯定会有更加简单的方法的!最后在网上找到了几个简单实用的方法,通过小编的测试验证是没有问题的,现在将具体的方法总结如下:


1、split拆分法

通过对返回的URL字符串截取的方式获取参数值。

  1)、函数一:获取URL中的参数名及参数值的集合

/**
 * [获取URL中的参数名及参数值的集合]
 * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";
 * @param {[string]} urlStr [当该参数不为空的时候,则解析该url中的参数集合]
 * @return {[string]}       [参数集合]
 */
function GetRequest(urlStr) {
    if (typeof urlStr == "undefined") {
        // 获取url中"?"符后的字符串
        var url = decodeURI(location.search);
    } else {
        var url = "?" + urlStr.split("?")[1];
    }
    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]] = decodeURI(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}

测试调用方法:

let url = "http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";
// 第一种:无参数(不传url,直接从当前浏览器的url获取)
let params01 = GetRequest();
console.log(params01);      // {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"}
console.log(params01['name']);  // 阿豪
// 第二种:传url
let params02 = GetRequest(url);
console.log(params02);      // {uid: "admin", passWord: "123456", fid: "1314", name: "阿豪"}
console.log(params02['name']);  // 阿豪

 2)、函数二:通过参数名获取url中的参数值

/**
 * [通过参数名获取url中的参数值]
 * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";
 * @param  {[string]} queryName [参数名]
 * @return {[string]}           [参数值]
 */
function GetQueryValue(queryName) {
    debugger;
    var query = decodeURI('window.location.search'.substring(1));
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == queryName) {
            return pair[1];
        }
    }
    return null;
}

测试调用方法:

1. let name = GetQueryValue('name');
2. 
3. console.log(name);   // 阿豪

2、正则法

通过对返回的URL字符串,采用正则获取到参数值。

1)、正则法用法一:

/**
 * [通过参数名获取url中的参数值]
 * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";
 * @param  {[string]} queryName [参数名]
 * @return {[string]}           [参数值]
 */
function GetQueryValue(queryName) {
    debugger
    var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
    // 获取url中"?"符后的字符串并正则匹配
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURI(r[2]);
    } else {
        return null;
    }
}

测试调用方法:

1. let queryVal = GetQueryValue('name');
2. 
3. console.log(queryVal);   // 阿豪

2)、正则法用法二:

/**
 * [通过参数名获取url中的参数值]
 * 示例URL:"http://test/getIndex/indexRequest.html?uid=admin&passWord=123456&fid=1314&name=阿豪";
 * @param  {[string]} queryName [参数名]
 * @return {[string]}           [参数值]
 */
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    var context = "";
    if (r != null)
        context = r[2];
    reg = null;
    r = null;
    return context == null || context == "" || context == "undefined" ? "" : context;
}

测试调用方法:

1. let queryVal = GetQueryValue('name');
2. 
3. console.log(queryVal);   // 阿豪

3、单个参数的获取方法

/**
 * 获取url中只有一个参数的参数值]
 * 示例URL: "http://test/getIndex/indexRequest.html?name=阿豪";
 * @return {[string]}     [参数值]
 */
function GetRequestValue() {
    // 获取url中"?"符后的字串
    var url = location.search;
    // 判断是否有参数
    if (url.indexOf("?") != -1) {
        // 从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
        var str = url.substr(1);
        strs = str.split("=");
        return strs[1];
    }
    return null;
}

测试调用方法:

1. let queryVal = GetRequestValue();
2. 
3. console.log(queryVal);   // 阿豪
目录
相关文章
|
12天前
|
安全 Java API
Java根据URL获取文件内容的实现方法
此示例展示了如何安全、有效地根据URL获取文件内容。它不仅展现了处理网络资源的基本技巧,还体现了良好的异常处理实践。在实际开发中,根据项目需求,你可能还需要添加额外的功能,如设置连接超时、处理HTTP响应码等。
62 4
|
10天前
|
JavaScript 前端开发 Python
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
JavaScript写个.ts视频文件Url生成器,使用了string.padStart
|
14天前
|
JavaScript 前端开发 API
javaScript中常用的String方法以及注意点总结
本文总结了JavaScript中常用的String对象的方法及其注意事项,包括大小写转换、字符获取、子字符串截取、字符串拼接、去除空格、替换、分割以及查找字符串中字符的索引等操作。提供了每种方法的使用示例代码,帮助理解它们的具体用法和差异。
28 2
|
15天前
|
JavaScript 前端开发
JS之concat方法
本文介绍了JavaScript中`concat`方法的使用,展示了如何利用该方法来合并数组,包括与字符串、数字、对象等类型的拼接,以及使用扩展运算符进行合并的示例。
10 0
JS之concat方法
|
10天前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
10天前
|
JavaScript 前端开发
JavaScript从二维数组抽取元素组成新数组的三种方法
JavaScript从二维数组抽取元素组成新数组的三种方法
|
10天前
|
JavaScript 前端开发
用Javascript对二维数组DIY按汉语拼音的排序方法
用Javascript对二维数组DIY按汉语拼音的排序方法
|
12天前
|
JSON JavaScript 前端开发
6-19|Python数据传到JS的方法
6-19|Python数据传到JS的方法
|
12天前
|
JavaScript 前端开发
JavaScript 中 五种迭代数组的方法 every some map filter forEach
本文介绍了JavaScript中五种常用数组迭代方法:every、some、filter、map和forEach,并通过示例代码展示了它们的基本用法和区别。
|
13天前
|
前端开发 JavaScript
前端JS截取url上的参数
文章介绍了两种前端JS获取URL参数的方法:手动截取封装和使用URLSearchParams。
25 0