使用JavaScript从URL获取GET变量时返回Null值问题

嘿，我看到你在提取URL查询参数时一直拿到null，咱们来揪出问题根源并解决它～

首先看你的情况：目标URL是http://example.com/page2.html?user%20=admin，你写的正则函数始终返回null，主要有两个关键问题：

问题1：参数名包含空格（URL编码为%20） #

你的URL里的参数名是user （末尾带空格，因为%20是空格的URL编码），如果调用函数时传入的是'user'（不带空格），正则自然匹配不到对应的参数，直接返回null。

问题2：正则里的&是HTML转义字符，不符合原始URL格式 #

window.location.href返回的是原始URL，其中参数分隔符是&，而不是HTML转义后的&，你的正则用[?&]会导致无法正确匹配参数的起始分隔符。

修正后的代码 #

先把正则里的&换成&，然后根据URL的实际参数名来调用函数：

var getQueryString = function (field, url) {
  var href = url ? url : window.location.href;
  // 把&换成&，同时保留大小写不敏感的匹配
  var reg = new RegExp('[?&]' + field + '=([^&#]*)', 'i');
  var string = reg.exec(href);
  return string ? string[1] : null;
}

// 调用示例：因为参数名是带空格的user，所以传入'user '
console.log(getQueryString('user ', 'http://example.com/page2.html?user%20=admin')); // 输出admin

更规范的优化建议 #

带空格的参数名其实不太符合URL规范，建议把URL改成http://example.com/page2.html?user=admin（去掉参数名里的空格），这样调用时直接传'user'就能拿到结果：

console.log(getQueryString('user', 'http://example.com/page2.html?user=admin')); // 输出admin

更简单的原生API方案 #

现在浏览器都支持URLSearchParams原生API，不用自己写正则，更可靠：

// 针对带空格参数的URL
const url = new URL('http://example.com/page2.html?user%20=admin');
console.log(url.searchParams.get('user ')); // 输出admin

// 针对规范的URL
const url2 = new URL('http://example.com/page2.html?user=admin');
console.log(url2.searchParams.get('user')); // 输出admin

内容的提问来源于stack exchange，提问作者samw003801