복붙노트

[JQUERY] 자바 스크립트 / jQuery를의 $ .PARAM () 역함수

JQUERY

자바 스크립트 / jQuery를의 $ .PARAM () 역함수

해결법

  1. 1.당신은 jQuery를 BBQ의 deparam 기능을 사용해야합니다. 그것은 잘 테스트 및 문서화합니다.

    당신은 jQuery를 BBQ의 deparam 기능을 사용해야합니다. 그것은 잘 테스트 및 문서화합니다.

  2. 2.이것은 내가 비슷한 뭔가를 얼마 전에 쓴 함수의 약간 수정 된 버전입니다.

    이것은 내가 비슷한 뭔가를 얼마 전에 쓴 함수의 약간 수정 된 버전입니다.

    var QueryStringToHash = function QueryStringToHash  (query) {
  var query_string = {};
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    pair[0] = decodeURIComponent(pair[0]);
    pair[1] = decodeURIComponent(pair[1]);
        // If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
        // If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
        // If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
  return query_string;
};

  3. 3.어떻게이 짧은 기능적 접근에 대한?

    어떻게이 짧은 기능적 접근에 대한?

    function parseParams(str) {
    return str.split('&').reduce(function (params, param) {
        var paramSplit = param.split('=').map(function (value) {
            return decodeURIComponent(value.replace(/\+/g, ' '));
        });
        params[paramSplit[0]] = paramSplit[1];
        return params;
    }, {});
}

    예:

    parseParams("this=is&just=an&example") // Object {this: "is", just: "an", example: undefined}

  4. 4.내 대답 :

    내 대답 :

    function(query){
  var setValue = function(root, path, value){
    if(path.length > 1){
      var dir = path.shift();
      if( typeof root[dir] == 'undefined' ){
        root[dir] = path[0] == '' ? [] : {};
      }

      arguments.callee(root[dir], path, value);
    }else{
      if( root instanceof Array ){
        root.push(value);
      }else{
        root[path] = value;
      }
    }
  };
  var nvp = query.split('&');
  var data = {};
  for( var i = 0 ; i < nvp.length ; i++ ){
    var pair = nvp[i].split('=');
    var name = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);

    var path = name.match(/(^[^\[]+)(\[.*\]$)?/);
    var first = path[1];
    if(path[2]){
      //case of 'array[level1]' || 'array[level1][level2]'
      path = path[2].match(/(?=\[(.*)\]$)/)[1].split('][')
    }else{
      //case of 'name'
      path = [];
    }
    path.unshift(first);

    setValue(data, path, value);
  }
  return data;
}

  5. 5.나는 데이빗도 워드의 답변을 사용하여, 그들이 PARAMS을 구문 분석하는 방법은 레일에 PHP 나 루비처럼 행동하지 않는 것을 실현하고 있습니다 :

    나는 데이빗도 워드의 답변을 사용하여, 그들이 PARAMS을 구문 분석하는 방법은 레일에 PHP 나 루비처럼 행동하지 않는 것을 실현하고 있습니다 :

    이 같은? 선택 [] = 1 선택 []는? 때가 아니라 12 = [끝나는 경우 1) 변수는 어레이 인 = 1 A = 2

    배수 값 PARAMS 같은 이름 존재할 때 레일 등? A = 1, B = 2 A = 3, 첫번째 유지하고) 나중 것들은 무시에 2) 이후의 것들 루비 (PHP 서버로서, 이전 것들을 대체

    다윗의 버전을 수정 그래서, 내가 가진 :

    function QueryStringToHash(query) {

  if (query == '') return null;

  var hash = {};

  var vars = query.split("&");

  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var k = decodeURIComponent(pair[0]);
    var v = decodeURIComponent(pair[1]);

    // If it is the first entry with this name
    if (typeof hash[k] === "undefined") {

      if (k.substr(k.length-2) != '[]')  // not end with []. cannot use negative index as IE doesn't understand it
        hash[k] = v;
      else
        hash[k.substr(0, k.length-2)] = [v];

    // If subsequent entry with this name and not array
    } else if (typeof hash[k] === "string") {
      hash[k] = v;  // replace it

    // If subsequent entry with this name and is array
    } else {
      hash[k.substr(0, k.length-2)].push(v);
    }
  } 
  return hash;
};

    이는 상당히 철저하게 테스트입니다.

  6. 6.나는이 오래된 스레드 알지만, 어쩌면 아직 어떤 관련이 있습니까?

    나는이 오래된 스레드 알지만, 어쩌면 아직 어떤 관련이 있습니까?

    재키 리의 좋은 해결책에서 영감을 나는 또한 배열의 임의의 조합을 돌볼 수 있기를 목적으로 내 자신의 약간의 변화를 시도하고 입력으로 객체. 나는 PHP가 일을하고가는 "유사한"뭔가를 얻기 위해 노력했다 얼마나 보았다. 여기 내 코드는 다음과 같습니다

    function getargs(str){
   var ret={};
   function build(urlnam,urlval,obj){ // extend the return object ...
    var i,k,o=obj, x, rx=/\[([^\]]*)\]/g, idx=[urlnam.replace(rx,'')];
    while (x=rx.exec(urlnam)) idx.push(x[1]); 
    while(true){
     k=idx.shift();
     if(k.trim()=='') {// key is empty: autoincremented index
       if (o.constructor.name=='Array') k=o.length; // for Array
       else if (o===obj ) {k=null}  // for first level property name
       else {k=-1;                                  // for Object
         for(i in o) if (+i>k) k=+i;
         k++;
       }
     }
     if(idx.length) { 
       // set up an array if the next key (idx[0]) appears to be
       // numeric or empty, otherwise set up an object:
       if (o[k]==null || typeof o[k]!='object') o[k]=isNaN(idx[0])?{}:[]; 
       o=o[k]; // move on to the next level
     }
     else { // OK, time to store the urlval in its chosen place ...
       // console.log('key',k,'val',urlval);                 
       o[k]=urlval===""?null:urlval; break; // ... and leave the while loop.
     } 
    }
    return obj;
   }
   // ncnvt: is a flag that governs the conversion of
   // numeric strings into numbers
   var ncnvt=true,i,k,p,v,argarr=[],
       ar=(str||window.location.search.substring(1)).split("&"),
       l=ar.length;
   for (i=0;i<l;i++) {if (ar[i]==="") continue;
     p=ar[i].split("=");k=decodeURIComponent(p[0]);
     v=p[1];v=(v!=null)?decodeURIComponent(v.replace(/\+/g,'%20')):'';
     if (ncnvt && v.trim()>"" && !isNaN(v)) v-=0;
     argarr.push([k,v]);  // array: key-value-pairs of all arguments
   }
   for (i=0,l=argarr.length;i<l;i++) build(argarr[i][0],argarr[i][1],ret);
   return ret;
}

    함수가 STR 인수없이 호출되면 그 입력으로 window.location.search.slice (1) 가정한다.

    몇 가지 예 :

    ['a=1&a=2',                               // 1
 'x[y][0][z][]=1',                        // 2
 'hello=[%22world%22]&world=hello',       // 3
 'a=1&a=2&&b&c=3&d=&=e&',                 // 4
 'fld[2][]=2&fld[][]=3&fld[3][]=4&fld[]=bb&fld[]=cc',  // 5
 $.param({a:[[1,2],[3,4],{aa:'one',bb:'two'},[5,6]]}), // 6
 'a[]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13',// 7
 'a[x]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13'// 8
].map(function(v){return JSON.stringify(getargs(v));}).join('\n')

    결과

    {"a":2}                                    // 1
{"x":{"y":[{"z":[1]}]}}                    // 2
{"hello":"[\"world\"]","world":"hello"}    // 3
{"a":2,"b":null,"c":3,"d":null,"null":"e"} // 4 = { a: 2, b: null, c: 3, d: null, null: "e" }
{"fld":[null,null,[2],[3,4],"bb","cc"]}    // 5 
{"a":[[1,2],[3,4],{"aa":"one","bb":"two"},[5,6]]}  // 6
{"a":["hi",2,null,[7,99],13]}              // 7
{"a":{"0":2,"3":[7,99],"4":13,"x":"hi"}}   // 8

    재키 리의 솔루션은 일반 객체로의 외부 용기를 생산하는 것입니다 반면

    {a:{"0":["1","2"],"1":["3","4"],"2":["5","6"]}} // 6: JackyLi's output

    모든 레벨에 대한 제 지정된 인덱스 getargs () 외모 아니오 (리스팅 (listing) 보브에 도시 된 바와 같이,이 레벨은 따라서 출력 결과 객체 (숫자가 아닌 인덱스) 또는 어레이 (숫자 또는 빈)를 할 것인지를 결정한다. 6).

    현재의 객체가 배열의 경우, 널 (null)은 빈 위치를 나타 내기 위해 필요한 곳에 삽입 얻을. ) 배열은 항상 연속 번호가 0이 기반.

    참고, 그 예에는.하지 8 빈 인덱스에 대해 "자동 증가는"아직 우리가 아닌 배열 객체를 다루는 경우에도, 작동합니다.

    지금까지 내가 그것을 테스트 한대로, 내 getargs은 () Chriss 로저의 위대한의 jQuery $의 .deparam에 거의 동일하게 작동 ()은 허용 대답에 언급 된 플러그인이. 가장 큰 차이점은 jQuery를하지 않고 그 getargs 실행이며 $ .deparam ()가 그렇게 할 수는 없지만 객체에 자동 증가를한다는 것을 :

    JSON.stringify($.deparam('a[x]=hi&a[]=2&a[3][]=7&a[3][]=99&a[]=13').a);

    결과

    {"3":["7","99"],"x":"hi","undefined":"13"}

    $ .deparam () 인덱스의 [] autoincremented 대신 수치 인덱스를 정의되지 int로서 해석된다.

  7. 7.다음은 새의 jQuery 함수를 만들 수있는 방법은 다음과 같습니다

    다음은 새의 jQuery 함수를 만들 수있는 방법은 다음과 같습니다

    jQuery.unparam = function (value) {
    var
    // Object that holds names => values.
    params = {},
    // Get query string pieces (separated by &)
    pieces = value.split('&'),
    // Temporary variables used in loop.
    pair, i, l;

    // Loop through query string pieces and assign params.
    for (i = 0, l = pieces.length; i < l; i++) {
        pair = pieces[i].split('=', 2);
        // Repeated parameters with the same name are overwritten. Parameters
        // with no value get set to boolean true.
        params[decodeURIComponent(pair[0])] = (pair.length == 2 ?
            decodeURIComponent(pair[1].replace(/\+/g, ' ')) : true);
    }

    return params;
};

  8. 8.그 덕분에 http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

    그 덕분에 http://james.padolsey.com/javascript/parsing-urls-with-the-dom/

    아주 쉽게 : D

    function params_unserialize(p){
var ret = {},
    seg = p.replace(/^\?/,'').split('&'),
    len = seg.length, i = 0, s;
for (;i<len;i++) {
    if (!seg[i]) { continue; }
    s = seg[i].split('=');
    ret[s[0]] = s[1];
}
return ret;}

  9. 9.여기에 내가 서버 측 JScript의 ASP 클래식 페이지 (데모)에서 사용하는 내 자바 스크립트 구현입니다 :

    여기에 내가 서버 측 JScript의 ASP 클래식 페이지 (데모)에서 사용하는 내 자바 스크립트 구현입니다 :

    // Transforms a query string in the form x[y][0][z][]=1 into {x:{y:[{z:[1]}]}}
function parseJQueryParams(p) {
    var params = {};
    var pairs = p.split('&');
    for (var i=0; i<pairs.length; i++) {
        var pair = pairs[i].split('=');
        var indices = [];
        var name = decodeURIComponent(pair[0]),
            value = decodeURIComponent(pair[1]);

        var name = name.replace(/\[([^\]]*)\]/g, 
            function(k, idx) { indices.push(idx); return ""; });

        indices.unshift(name);
        var o = params;

        for (var j=0; j<indices.length-1; j++) {
            var idx = indices[j];
            var nextIdx = indices[j+1];
            if (!o[idx]) {
                if ((nextIdx == "") || (/^[0-9]+$/.test(nextIdx)))
                    o[idx] = [];
                else
                    o[idx] = {};
            }
            o = o[idx];
        }

        idx = indices[indices.length-1];
        if (idx == "") {
            o.push(value);
        }
        else {
            o[idx] = value;
        }
    }
    return params;
}

  10. 10.이것을 사용 :

    이것을 사용 :

    // convert query string to json object
var queryString = "cat=3&sort=1&page=1";

queryString
    .split("&")
    .forEach((item) => {
        const prop = item.split("=");
        filter[prop[0]] = prop[1];
    });

console.log(queryString);

  11. 11.나는 닷넷 같은 동작합니다이 HttpUtility.ParseQueryString을 기능이 솔루션을 함께했다.

    나는 닷넷 같은 동작합니다이 HttpUtility.ParseQueryString을 기능이 솔루션을 함께했다.

    그 결과, 상기 질의 스트링 파라미터 그래서 qsObj [ "은 PARAM"]는 GetValues ​​닷넷 ( "PARAM")를 호출하는 것과 동일하다고, 값리스트와 같은 속성에 저장된다.

    나는 그것을 좋아하면 좋겠. JQuery와 필요하지 않습니다.

    var parseQueryString = function (querystring) {
    var qsObj = new Object();
    if (querystring) {
        var parts = querystring.replace(/\?/, "").split("&");
        var up = function (k, v) {
            var a = qsObj[k];
            if (typeof a == "undefined") {
                qsObj[k] = [v];
            }
            else if (a instanceof Array) {
                a.push(v);
            }
        };
        for (var i in parts) {
            var part = parts[i];
            var kv = part.split('=');
            if (kv.length == 1) {
                var v = decodeURIComponent(kv[0] || "");
                up(null, v);
            }
            else if (kv.length > 1) {
                var k = decodeURIComponent(kv[0] || "");
                var v = decodeURIComponent(kv[1] || "");
                up(k, v);
            }
        }
    }
    return qsObj;
};

    여기를 사용하는 방법입니다 :

    var qsObj = parseQueryString("a=1&a=2&&b&c=3&d=&=e&");

    콘솔 juste 타입의 결과를 미리 보려면 :

    JSON.stringify(qsObj)

    산출:

    "{"a":["1","2"],"null":["","b",""],"c":["3"],"d":[""],"":["e"]}"

  12. 12.CSS-트릭에서 위에 아름 다운 한 - 라이너 (니콜라스 Ortenzio에서 원본 소스)있다 :

    CSS-트릭에서 위에 아름 다운 한 - 라이너 (니콜라스 Ortenzio에서 원본 소스)있다 :

    function getQueryParameters(str) {
    return (str || document.location.search).replace(/(^\?)/,'').split("&").map(function(n){return n = n.split("="),this[n[0]] = n[1],this}.bind({}))[0];
}

    이 문자열에서 쿼리의 각 키 / 값 쌍을 추가, 익명 함수가이 오브젝트의 사용 방법을 정말 영리한 부분이다. 즉, 개선의 여지가있다 고 말했다. 나는 다음과 같은 변화, 조금 아래를 수정했습니다 :

    function deparam(str) {
    // Uses an empty 'this' to build up the results internally
    function splitQuery(query) {
        query = query.split('=').map(decodeURIComponent);
        this[query[0]] = query[1];
        return this;
    }

    // Catch bad input
    if (!str || !(typeof str === 'string' || str instanceof String))
        return {};

    // Split the string, run splitQuery on each piece, and return 'this'
    var queries = str.replace(/(^\?)/,'').split('&');
    return queries.map(splitQuery.bind({}))[0];
}

  13. 13.이건 정말 오래된 질문이지만, 내가 오는대로 - 다른 사람이 게시물에 올 수 있으며, 조금이 테마를 새로 고치려면 내가 원하는. 오늘 사용자 지정 솔루션을 만들 필요가 없습니다 - URLSearchParams 인터페이스가있다.

    이건 정말 오래된 질문이지만, 내가 오는대로 - 다른 사람이 게시물에 올 수 있으며, 조금이 테마를 새로 고치려면 내가 원하는. 오늘 사용자 지정 솔루션을 만들 필요가 없습니다 - URLSearchParams 인터페이스가있다.

    var paramsString = "q=URLUtils.searchParams&topic=api";
var searchParams = new URLSearchParams(paramsString);

//Iterate the search parameters.
for (let p of searchParams) {
  console.log(p);
}

    내가 아는 유일한 한 가지 제한 - IE / 에지에서 지원되지 않습니다이 기능.

  14. 14.이 커피 스크립트 내 버전입니다. 또한 같은 URL에 대한 작동 에 http : // localhost를 : 4567 / index.html을 안녕하세요 = [% 22world % 22] 세계 = 안녕하세요 # / 집

    이 커피 스크립트 내 버전입니다. 또한 같은 URL에 대한 작동 에 http : // localhost를 : 4567 / index.html을 안녕하세요 = [% 22world % 22] 세계 = 안녕하세요 # / 집

    getQueryString: (url)->
    return null if typeof url isnt 'string' or url.indexOf("http") is -1

    split = url.split "?"

    return null if split.length < 2 
    path = split[1]

    hash_pos = path.indexOf "#"
    path = path[0...hash_pos] if hash_pos isnt -1

    data = path.split "&"
    ret = {}
    for d in data
      [name, val] = d.split "=" 
      name = decodeURIComponent name
      val = decodeURIComponent val
      try 
        ret[name] = JSON.parse val
      catch error
        ret[name] = val
    return ret

  15. 15.다음은 간단한 & 만 빨리 GET 요청의 매개 변수를 얻으려면 컴팩트 하나입니다 :

    다음은 간단한 & 만 빨리 GET 요청의 매개 변수를 얻으려면 컴팩트 하나입니다 :

    function httpGet() {
    var a={},b,i,q=location.search.replace(/^\?/,"").split(/\&/);
    for(i in q) if(q[i]) {b=q[i].split("=");if(b[0]) a[b[0]]=
    decodeURIComponent(b[1]).replace(/\+/g," ");} return a;
}

    그것은 변환

    something?aa=1&bb=2&cc=3

    같은 객체로

    {aa:1,bb:2,cc:3}

  16. 16.배열이나 객체의 직렬화 표현을 만듭니다 (AJAX 요청의 URL 쿼리 문자열로 사용할 수 있습니다).

    배열이나 객체의 직렬화 표현을 만듭니다 (AJAX 요청의 URL 쿼리 문자열로 사용할 수 있습니다).

    <button id='param'>GET</button> 
<div id="show"></div>
<script>
  $('#param').click(function () {
    var personObj = new Object();
    personObj.firstname = "vishal"
    personObj.lastname = "pambhar";
    document.getElementById('show').innerHTML=$.param(`personObj`));
  });
</script>
output:firstname=vishal&lastname=pambhar

  17. 17.답변 jQuery를 우아함의 비트를 사용할 수 있습니다 :

    답변 jQuery를 우아함의 비트를 사용할 수 있습니다 :

    (function($) {
var re = /([^&=]+)=?([^&]*)/g;
var decodeRE = /\+/g; // Regex for replacing addition symbol with a space
var decode = function (str) {return decodeURIComponent( str.replace(decodeRE, " ") );};
$.parseParams = function(query) {
    var params = {}, e;
    while ( e = re.exec(query) ) {
        var k = decode( e[1] ), v = decode( e[2] );
        if (k.substring(k.length - 2) === '[]') {
            k = k.substring(0, k.length - 2);
            (params[k] || (params[k] = [])).push(v);
        }
        else params[k] = v;
    }
    return params;
};
})(jQuery);

    https://gist.github.com/956897에서 포크

  18. 18.당신은 jQuery를 자체의 기능 .serializeArray () (링크)를 사용할 수 있습니다. 이 함수는 키 - 값 쌍의 어레이를 리턴한다. 예 결과 :

    당신은 jQuery를 자체의 기능 .serializeArray () (링크)를 사용할 수 있습니다. 이 함수는 키 - 값 쌍의 어레이를 리턴한다. 예 결과 :

    [
  { name: "id", value: "1" },
  { name: "version", value: "100" }
]

    19. from https://stackoverflow.com/questions/1131630/the-param-inverse-function-in-javascript-jquery by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 마우스 오른쪽 클릭에 바인딩 이벤트  (0) 2020.10.26
[JQUERY] 어떻게 자바 스크립트 / 빼기 날짜를 추가하려면?  (0) 2020.10.26
[JQUERY] 그것은 자바 스크립트 또는 jQuery를 사용하여 PDF로 HTML 페이지를 저장 할 수 있습니까?  (0) 2020.10.26
[JQUERY] 명시 적 스타일이없는 경우에만 CSS 클래스와 jQuery.animate ()  (0) 2020.10.26
[JQUERY] 자바 스크립트의 URL을 구문 분석  (0) 2020.10.26
,

티스토리툴바