JavaScript获取地址栏url参数

URL参数解析技巧

原创已于 2022-07-28 18:46:27 修改 · 801 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#url #地址栏 #url参数 #获取

于 2017-12-05 17:50:04 首次发布

正则表达式专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript从URL中提取参数的方法，并提供了获取所有参数和特定参数值的实用函数。通过正则表达式匹配，可以轻松地将参数转换为易于操作的对象。

获取全部参数


function getParams(url) {
  try {
    url = url.match(/\?([^#]+)/)[1];
    const obj = {};
    const arr = url.split('&');
    for (let i = 0; i < arr.length; i++) {
      let subArr = arr[i].split('=');
      let key = decodeURIComponent(subArr[0]);
      let value = decodeURIComponent(subArr[1]);
      obj[key] = value;
    }
    return obj;
  } catch (err) {
    return null;
  }
}

var urlStr = 'http://www.xxx.com/test?name=zhangshan&age=50#hello';

getParams(urlStr); //{name: "zhangshan", age: "50"}

获取单个参数值


function getParam(url, key){
	var pattern = new RegExp('[?&]*'+ key +'=([^&]+)');
  	try {
  	    var value = url.match(pattern)[1];
  	    return value;
  	} catch (err) {
  	    return null;
  	}
}

var url = 'http://www.xxx.com/test?name=zhangshan&age=50#hello'; 
var key = 'name';
getParam(url, key); // zhangshan