web-dev-qa-db-ja.com

JSONとしてのwindow.location.searchクエリ

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]; });
jqueryjsonsearchwindow.location
15
thugsb

これが純粋な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」ではなく「オブジェクト」に格納しようとしています。 ;）

24
Carlo Zottmann

最新のブラウザを使用している場合、これは受け入れられた回答と同じ結果を生成します。

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;
  }, {})
}
12
Ali Malekpour

単純な場合のおそらく最短の解決策：

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

検索パラメータをクエリ/操作するための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);
}
2
VyvIT

私のアプローチ、シンプルでクリーン

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 ) );
2
Leonardo Ciaccio

ESNextとレデューサーを少し使用してこのソリューションを共有したかっただけです。

@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);
1
rafaelbiten

@rafaelbitenのES6作業に基づいて、値を持たないparamsのサポートを追加し、重複エントリスタイルのparam配列をクエリしました。

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);
1
Ricky C

注-上記のソリューションは機能することは間違いありませんが、すべての演算子をカバーするわけではありません

あなたはこのようなものが欲しいと思います-

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);

例-

検索@ 1行目を

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

あなたが得る出力は

Object {abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"}
0
shubhamkes

Stringify後のJSON解析は、配列データを使用して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();
0
Priya

誰かが検索クエリパラメータにアクセスすることだけを探している場合は、次の関数を使用します。

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

getQueryStringValue(term)を呼び出すだけで簡単に使用できます

0
Jeffery ThaGintoki