以 JSON 格式的 window.location.search 查询

Posted 2023-02-23

【中文标题】以 JSON 格式的 window.location.search 查询

【英文标题】：window.location.search query as JSON

【发布时间】：2011-09-26 06:06:29

【问题描述】：

有没有更好的方法将 URL 的 location.search 转换为对象？也许只是更有效或更精简？我用的是jQuery，但是纯JS也可以。

var query = window.location.search.substring(1), queryPairs = query.split('&'), queryJSON = ;
$.each(queryPairs, function()  queryJSON[this.split('=')[0]] = this.split('=')[1]; );

【参考方案1】：

另请注意，有一个 api 用于查询/操作搜索参数： https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var params = new URLSearchParams(window.location.search)
for (let p of params) 
  console.log(p);

【讨论】：

老兄，这就是我正在寻找的解决方案。浏览器支持似乎很好，除了 IE。谢谢！

【参考方案2】：

如果有人只想访问搜索查询参数，请使用此功能：

function getQueryStringValue (key)

    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"))

简单易用，只需拨打getQueryStringValue(term)

【参考方案3】：

可能是简单案例的最短解决方案：

location.search
  .slice(1)
  .split('&')
  .map(p => p.split('='))
  .reduce((obj, [key, value]) => ( ...obj, [key]: value ), );

【参考方案4】：

在@rafaelbiten 的 ES6 工作的基础上，我添加了对没有值的参数的支持，并查询了重复条目样式的参数数组。

JSFiddle：https://jsfiddle.net/w922xefs/

const queryStringToJSObject = searchString => 
  if (!searchString) return null;

  return searchString
    .replace(/^\?/, '') // Only trim off a single leading interrobang.
    .split('&')
    .reduce((result, next) => 
      if (next === "") 
        return result;
      
      let pair = next.split('=');
      let key = decodeURIComponent(pair[0]);
      let value = typeof pair[1] !== "undefined" && decodeURIComponent(pair[1]) || undefined;
      if (result.hasOwnProperty(key))  // Check to see if this property has been met before.
        if (Array.isArray(result[key]))  // Is it already an array?
          result[key].push(value);
        
        else  // Make it an array.
          result[key] = [result[key], value];
        
      
      else  // First time seen, just add it.
        result[key] = value;
      

      return result;
    , 
  );
;

// Simple read of query string
const searchData = queryStringToJSObject(window.location.search);

【参考方案5】：

注意 --上述解决方案无疑是有效的，但它不会涵盖所有运营商

猜你会想要这样的东西-

var search = location.search;
var trimmedSearch = search.substring(1);

var searchObj = trimmedSearch?JSON.parse(
   '"' + trimmedSearch.replace(/&/g, '","').replace(/=/g,'":"') + '"', 
    function(key, value)  
       return key===""?value:decodeURIComponent(value) 
    
)
:


console.log(searchObj);

前-

覆盖搜索@第一行

search = "abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar";

你得到的输出是

Object abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"

【参考方案6】：

stringify 之后的 JSON Parse 完成了将数组数据转换为 json 的工作。

?key1=val1&key2[]=val2.1&key2[]=val2.2&key2[]=val2.3&

     'key1' : 'val1',
     'key2' : [ 'val2.1', 'val2.2', 'val2.3' ]

function QueryParamsToJSON()             
    var list = location.search.slice(1).split('&'),
        result = ;

    list.forEach(function(keyval) 
        keyval = keyval.split('=');
        var key = keyval[0];
        if (/\[[0-9]*\]/.test(key) === true) 
            var pkey = key.split(/\[[0-9]*\]/)[0];
            if (typeof result[pkey] === 'undefined') 
                result[pkey] = [];
            
            result[pkey].push(decodeURIComponent(keyval[1] || ''));
         else 
            result[key] = decodeURIComponent(keyval[1] || '');
        
    );

    return JSON.parse(JSON.stringify(result));


var query_string = QueryParamsToJSON();

【参考方案7】：

我的方法，简单干净

var params = "?q=Hello World&c=Awesome";

params = "\"" + 
         params
         .replace( /\?/gi, "" )
         .replace( /\&/gi, "\",\"" )
         .replace( /\=/gi, "\":\"" ) +
         "\"";
  
params = JSON.parse( params );

alert( decodeURIComponent( params.q ) );
alert( decodeURIComponent( params.c ) );

【参考方案8】：

只是想用一点 ESNext 和 reducer 分享这个解决方案。

它与@Carlo 建议的几乎相同，但如果您对 ES6 和减速器感到满意，它会更简洁。

const urlSearchData = searchString => 
    if (!searchString) return false;

    return searchString
        .substring(1)
        .split('&')
        .reduce((result, next) => 
            let pair = next.split('=');
            result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);

            return result;
        , );
;

const searchData = urlSearchData(window.location.search);

【参考方案9】：

如果您使用的是现代浏览器，这会产生与接受的答案相同的结果：

function searchToObject(search) 
  return search.substring(1).split("&").reduce(function(result, value) 
    var parts = value.split('=');
    if (parts[0]) result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
    return result;
  , )

【参考方案10】：

这是一个纯 JS 函数。解析当前 URL 的搜索部分并返回一个对象。 （请注意，这对于可读性来说有点冗长。）

function searchToObject() 
  var pairs = window.location.search.substring(1).split("&"),
    obj = ,
    pair,
    i;

  for ( i in pairs ) 
    if ( pairs[i] === "" ) continue;

    pair = pairs[i].split("=");
    obj[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
  

  return obj;

在相关说明中，您不是尝试将单个参数存储在“JSON”中，而是存储在“对象”中。 ;)