如何使用 jQuery 将所有 URL 参数放入对象数组中？

Question

我有一个像这样的字符串/url https://example.com/loadcontent?var1=100&var2=:somevar&var3=:morevariables

我需要循环思考 url 中的每个参数。 如果值以:开头，则表明它是一个变量，我将需要通过查看与该变量匹配的相应元属性来动态更改该值。

这是我的代码，其中循环遍历数组并设置参数的值。

    var baseURL = getBaseURL(url);

    var params = getParams(url);
    var newParams = $.each(params, function(index, param){

       if( param.value.substring(0, 1) == ':'){
           var myVar = param.value.substring(1);
           param.value = $('meta[name=" + myVar + "']).attr('value');
       }

    });

    var finalURL = baseURL + '?' + jQuery.param( newParams );

function getParams(url){
  // This function should return an array of objects. Each object should have 2 properties "value" and "name". The "name" property should be the name of the parameter (ie. var1, var2, var3 .....) and the "value" attribute should contains the value of the parameter (ie. 100, :somevar, :morevariables)


}

function getBaseURL(url){

  var cutoff = url.indexOf('?');

  if( cutoff > -1){
     return url.substring(0, cutoff - 1);
  }

  return url;

}

我需要帮助将给定 URL 的参数转换为对象数组。 我怎样才能在 jQuery 中做到这一点？

Answer 1

您无需为此使用jQuery。

function getParams(url) {

        var queryString = url.substring(url.indexOf('?') + 1);
        var paramsArr = queryString.split('&');
        var params = [];

        for (var i = 0, len = paramsArr.length; i < len; i++) {
            var keyValuePair = paramsArr[i].split('=');
            params.push({
                name: keyValuePair[0],
                value: keyValuePair[1]
            });
        }

        return params;
}

Answer 2

这是使用地图的示例

 var url = 'https://example.com/loadcontent?var1=100&var2=:somevar&var3=:morevariables&test'; function getParamArray(url) { var queryString = url.substring(url.lastIndexOf("?") + 1); return queryString.split('&').map(function(sParam) { var param = sParam.split('='); return { name: param[0], value: decodeURIComponent(param[1]) }; }); } document.getElementById("output").innerHTML = JSON.stringify(getParamArray(url), null, 2); 

 <pre id="output"></pre> 

Answer 3

使用常规表达式和JSON.parse：

 var url = 'https://example.com/loadcontent?var1=100&var2=:somevar&var3=:morevariables';

url = url.replace(/^.*\?/,'');
url = url.replace(/(\w+)=?([\w:]*)/g,'{"name":"$1","value":"$2"}');
url = url.replace(/&/g,',');

var paramsObject = JSON.parse("["+url+"]");


/*
Returns: 

Array [{"name":"var1","value":"100"},{"name":"var2","value":":somevar"},{"name":"var3","value":":morevariables"}];
*/

Answer 4

您甚至不需要JQuery。

<script type="text/javascript">
var paramStr = window.location.search;
var params = paramStr.substring(1, paramStr.length).split('&');
var paramList = [];
for (var index=0; index < params.length; index++) {
    var param = params[index].split('=');
    paramList.push({name: param[0], value: param[1]});
}
</script>

结果：

[Object]0: Object
name: "a"
value: "b"
...

Answer 5

 var url=new URLSearchParams(window.location.search);
        var params = [];
        for(var value of url.keys())
        {
            params.push({
                name: value,
                value: url.get(value)
            });
        }