javascript - querystring - yarn query string




JavaScript로 쿼리 문자열 값을 얻으려면 어떻게해야합니까? (20)

ES2015 (ES6)

getQueryStringParams = query => {
    return query
        ? (/^[?#]/.test(query) ? query.slice(1) : query)
            .split('&')
            .reduce((params, param) => {
                    let [key, value] = param.split('=');
                    params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : '';
                    return params;
                }, {}
            )
        : {}
};

jQuery없이

var qs = (function(a) {
    if (a == "") return {};
    var b = {};
    for (var i = 0; i < a.length; ++i)
    {
        var p=a[i].split('=', 2);
        if (p.length == 1)
            b[p[0]] = "";
        else
            b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " "));
    }
    return b;
})(window.location.search.substr(1).split('&'));

?topic=123&name=query+string 과 같은 URL을 사용하면 다음과 같이 반환됩니다.

qs["topic"];    // 123
qs["name"];     // query string
qs["nothere"];  // undefined (object)

Google 방법

구글의 코드를 찢어 나는 그들이 사용하는 방법을 발견 : getUrlParameters

function (b) {
    var c = typeof b === "undefined";
    if (a !== h && c) return a;
    for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) {
        var l = b[f][p]("=");
        if (l !== -1) {
            var q = b[f][I](0, l),
                l = b[f][I](l + 1),
                l = l[Ca](/\+/g, " ");
            try {
                d[q] = e(l)
            } catch (A) {}
        }
    }
    c && (a = d);
    return d
}

난독 화되었지만 이해할 수 있습니다.

그들은 URL에서 매개 변수를 찾기 시작 ? 또한 해시 # . 그런 다음 각 매개 변수에 대해 등호 b[f][p]("=") 나눕니다 b[f][p]("=") indexOf 처럼 보이며 키의 값을 얻기 위해 char의 위치를 ​​사용합니다). 분할하면 매개 변수에 값이 있는지 여부를 확인한 다음 매개 변수에 d 값이 저장되어 있는지 확인합니다. 그렇지 않으면 매개 변수가 계속됩니다.

결국 이스케이프 및 + 기호를 처리하는 개체 d 가 반환됩니다. 이 객체는 마치 내 것과 같습니다. 동일한 동작을합니다.

jQuery 플러그인 으로서의 나의 메소드

(function($) {
    $.QueryString = (function(paramsArray) {
        let params = {};

        for (let i = 0; i < paramsArray.length; ++i)
        {
            let param = paramsArray[i]
                .split('=', 2);

            if (param.length !== 2)
                continue;

            params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " "));
        }

        return params;
    })(window.location.search.substr(1).split('&'))
})(jQuery);

용법

//Get a param
$.QueryString.param
//-or-
$.QueryString["param"]
//This outputs something like...
//"val"

//Get all params as object
$.QueryString
//This outputs something like...
//Object { param: "val", param2: "val" }

//Set a param (only in the $.QueryString object, doesn't affect the browser's querystring)
$.QueryString.param = "newvalue"
//This doesn't output anything, it just updates the $.QueryString object

//Convert object into string suitable for url a querystring (Requires jQuery)
$.param($.QueryString)
//This outputs something like...
//"param=newvalue&param2=val"

//Update the url/querystring in the browser's location bar with the $.QueryString object
history.replaceState({}, '', "?" + $.param($.QueryString));
//-or-
history.pushState({}, '', "?" + $.param($.QueryString));

성능 테스트 (정규 메서드에 대한 분할 메서드) ( jsPerf )

준비 코드 : 메소드 선언

테스트 코드 분할

var qs = window.GetQueryString(query);

var search = qs["q"];
var value = qs["value"];
var undef = qs["undefinedstring"];

정규식 테스트 코드

var search = window.getParameterByName("q");
var value = window.getParameterByName("value");
var undef = window.getParameterByName("undefinedstring");

Windows Server 2008 R2 / 7 x64에서 Firefox 4.0 x86에서 테스트

  • 분할 방법 : 144,780 ± 2.17 % 가장 빠름
  • 정규식 방법 : 13,891 ± 0.85 % | 90 % 느림

jQuery (또는없이)를 통해 쿼리 문자열 값을 검색하는 플러그인이없는 방법이 있습니까?

그렇다면 어떻게? 그렇지 않다면 그렇게 할 수있는 플러그인이 있습니까?


URLSearchParams

Firefox 44 이상, Opera 36 이상, Edge 17 이상, Safari 10.3 이상, Chrome 49 이상은 URLSearchParams API를 지원합니다.

안정적인 버전의 IE 용 google에서 제안한 URLSearchParams polyfill 이 있습니다.

W3C 에서는 표준화되지 않았지만 WhatWG 는 살아있는 표준입니다.

위치에서 사용할 수는 있지만 제거해야 ? 물음표 (예 : .slice(1) ) :

let params = new URLSearchParams(location.search);

또는

let params = (new URL(location)).searchParams;

또는 물론 모든 URL에서 :

let url = new URL('https://example.com?foo=1&bar=2');
let params = new URLSearchParams(url.search);

다음과 같이 URL 객체에서 속기 .searchParams 속성을 사용하여 매개 변수를 가져올 수도 있습니다.

let params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2" 

get(KEY) , set(KEY, VALUE) , append(KEY, VALUE) API를 통해 매개 변수를 읽고 설정합니다. for (let p of params) {} 사용하여 모든 값 for (let p of params) {} 반복 할 수도 있습니다.

감사 구현 및 테스트를 위해 참조 구현샘플 페이지 를 사용할 수 있습니다.


Andy E가 완벽한 jQuery 플러그인으로 훌륭한 솔루션을 만드는 데 내 찌르다.

;(function ($) {
    $.extend({      
        getQueryString: function (name) {           
            function parseParams() {
                var params = {},
                    e,
                    a = /\+/g,  // Regex for replacing addition symbol with a space
                    r = /([^&=]+)=?([^&]*)/g,
                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
                    q = window.location.search.substring(1);

                while (e = r.exec(q))
                    params[d(e[1])] = d(e[2]);

                return params;
            }

            if (!this.queryStringParams)
                this.queryStringParams = parseParams(); 

            return this.queryStringParams[name];
        }
    });
})(jQuery);

구문은 다음과 같습니다.

var someVar = $.getQueryString('myParam');

두 세계의 최고!


jQuery를 사용하는 경우 jQuery BBQ : 뒤로 버튼 및 쿼리 라이브러리 와 같은 라이브러리를 사용할 수 있습니다.

... jQuery BBQ는 해시 상태 관리 및 조각 / 쿼리 문자열 구문 분석 및 병합 유틸리티 메서드와 함께 전체 .deparam() 메서드를 제공합니다.

편집 : Deparam 추가 예 :

 var DeparamExample = function() {
            var params = $.deparam.querystring();

            //nameofparam is the name of a param from url
            //code below will get param if ajax refresh with hash
            if (typeof params.nameofparam == 'undefined') {
                params = jQuery.deparam.fragment(window.location.href);
            }
            
            if (typeof params.nameofparam != 'undefined') {
                var paramValue = params.nameofparam.toString();
                  
            }
        };

일반 자바 스크립트 만 사용하려면 다음을 사용할 수 있습니다.

var getParamValue = (function() {
    var params;
    var resetParams = function() {
            var query = window.location.search;
            var regex = /[?&;](.+?)=([^&;]+)/g;
            var match;

            params = {};

            if (query) {
                while (match = regex.exec(query)) {
                    params[match[1]] = decodeURIComponent(match[2]);
                }
            }    
        };

    window.addEventListener
    && window.addEventListener('popstate', resetParams);

    resetParams();

    return function(param) {
        return params.hasOwnProperty(param) ? params[param] : null;
    }

})();​

새로운 HTML History API와 특히 history.pushState()history.replaceState() 때문에 URL이 변경되어 매개 변수 및 해당 값의 캐시를 무효화 할 수 있습니다.

이 버전은 기록이 변경 될 때마다 매개 변수의 내부 캐시를 업데이트합니다.


snipplr.com의 Roshambo 에는 jQuery를 사용하여 URL 매개 변수 가져 오기에 설명 된 간단한 스크립트가있다. 개선됨 . 스크립트를 사용하여 원하는 매개 변수 만 쉽게 가져올 수 있습니다.

여기 요점이 있습니다 :

$.urlParam = function(name, url) {
    if (!url) {
     url = window.location.href;
    }
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url);
    if (!results) { 
        return undefined;
    }
    return results[1] || undefined;
}

그런 다음 쿼리 문자열에서 매개 변수를 가져옵니다.

따라서 URL / 검색어 문자열이 xyz.com/index.html?lang=de

var langval = $.urlParam('lang'); 호출하면됩니다 var langval = $.urlParam('lang'); , 그리고 당신은 그것을 가지고 있습니다.

UZBEKJON도 이와 관련하여 훌륭한 블로그 게시물을 가지고 있습니다. jQuery를 사용하여 URL 매개 변수 및 값을 가져옵니다 .


간단한 자바 스크립트 코드로 유지 :

function qs(key) {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars[key];
}

JavaScript 코드의 아무 곳에서나 호출 할 수 있습니다.

var result = qs('someKey');

다음은 PHP $_GET 배열과 비슷한 객체를 얻는 빠른 방법입니다 :

function get_query(){
    var url = location.search;
    var qs = url.substring(url.indexOf('?') + 1).split('&');
    for(var i = 0, result = {}; i < qs.length; i++){
        qs[i] = qs[i].split('=');
        result[qs[i][0]] = decodeURIComponent(qs[i][1]);
    }
    return result;
}

용법:

var $_GET = get_query();

쿼리 문자열 x=5&y&z=hello&x=6 경우이 객체를 반환합니다.

{
  x: "6",
  y: undefined,
  z: "hello"
}

두 개의 스플릿을 사용하십시오.

function get(n) {
    var half = location.search.split(n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

나는 이전의보다 완전한 답을 모두 읽고 있었다. 그러나 나는 그것이 가장 간단하고 빠른 방법이라고 생각합니다. 이 jsPerf benchmark 에서 확인할 수 있습니다.

Rup의 주석에서 문제를 해결하려면 첫 번째 행을 아래 두 행으로 변경하여 조건부 분할을 추가하십시오. 하지만 절대 정확도는 regexp보다 더 느리다는 것을 의미합니다 ( jsPerf 참조).

function get(n) {
    var half = location.search.split('&' + n + '=')[1];
    if (!half) half = location.search.split('?' + n + '=')[1];
    return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null;
}

따라서 당신이 Rup의 소송 사건에 연루되지 않는다는 것을 안다면, 이것은 승리합니다. 그렇지 않으면 regexp.

또는 쿼리 문자열을 제어 할 수 있고 얻으려는 값에 URL 인코딩 문자가 포함되지 않는다고 보장 할 수 있다면 (값을 갖는 것이 좋지 않을 것입니다) 다음과 같이 약간 더 단순화되고 읽기 쉬운 버전을 사용할 수 있습니다 첫 번째 옵션 :

    function getQueryStringValueByName(name) {
        var queryStringFromStartOfValue = location.search.split(name + '=')[1];
         return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;

이것들은 모두 대단한 해답이지만 조금 더 튼튼한 것이 필요했고, 내가 만든 것을 갖고 싶어한다고 생각했습니다.

URL 매개 변수의 해부 및 조작을 수행하는 간단한 라이브러리 메소드입니다. 정적 메서드에는 제목 URL에서 호출 할 수있는 다음 하위 메서드가 있습니다.

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

예:

URLParser(url).getParam('myparam1')
var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something";

function URLParser(u){
    var path="",query="",hash="",params;
    if(u.indexOf("#") > 0){
        hash = u.substr(u.indexOf("#") + 1);
        u = u.substr(0 , u.indexOf("#"));
    }
    if(u.indexOf("?") > 0){
        path = u.substr(0 , u.indexOf("?"));
        query = u.substr(u.indexOf("?") + 1);
        params= query.split('&');
    }else
        path = u;
    return {
        getHost: function(){
            var hostexp = /\/\/([\w.-]*)/;
            var match = hostexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getPath: function(){
            var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/;
            var match = pathexp.exec(path);
            if (match != null && match.length > 1)
                return match[1];
            return "";
        },
        getHash: function(){
            return hash;
        },
        getParams: function(){
            return params
        },
        getQuery: function(){
            return query;
        },
        setHash: function(value){
            if(query.length > 0)
                query = "?" + query;
            if(value.length > 0)
                query = query + "#" + value;
            return path + query;
        },
        setParam: function(name, value){
            if(!params){
                params= new Array();
            }
            params.push(name + '=' + value);
            for (var i = 0; i < params.length; i++) {
                if(query.length > 0)
                    query += "&";
                query += params[i];
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
        getParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return decodeURIComponent(pair[1]);
                }
            }
            console.log('Query variable %s not found', name);
        },
        hasParam: function(name){
            if(params){
                for (var i = 0; i < params.length; i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) == name)
                        return true;
                }
            }
            console.log('Query variable %s not found', name);
        },
        removeParam: function(name){
            query = "";
            if(params){
                var newparams = new Array();
                for (var i = 0;i < params.length;i++) {
                    var pair = params[i].split('=');
                    if (decodeURIComponent(pair[0]) != name)
                          newparams .push(params[i]);
                }
                params = newparams;
                for (var i = 0; i < params.length; i++) {
                    if(query.length > 0)
                        query += "&";
                    query += params[i];
                }
            }
            if(query.length > 0)
                query = "?" + query;
            if(hash.length > 0)
                query = query + "#" + hash;
            return path + query;
        },
    }
}


document.write("Host: " + URLParser(url).getHost() + '<br>');
document.write("Path: " + URLParser(url).getPath() + '<br>');
document.write("Query: " + URLParser(url).getQuery() + '<br>');
document.write("Hash: " + URLParser(url).getHash() + '<br>');
document.write("Params Array: " + URLParser(url).getParams() + '<br>');
document.write("Param: " + URLParser(url).getParam('myparam1') + '<br>');
document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '<br>');

document.write(url + '<br>');

// Remove the first parameter
url = URLParser(url).removeParam('myparam1');
document.write(url + ' - Remove the first parameter<br>');

// Add a third parameter
url = URLParser(url).setParam('myparam3',3);
document.write(url + ' - Add a third parameter<br>');

// Remove the second parameter
url = URLParser(url).removeParam('myparam2');
document.write(url + ' - Remove the second parameter<br>');

// Add a hash
url = URLParser(url).setHash('newhash');
document.write(url + ' - Set Hash<br>');

// Remove the last parameter
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove the last parameter<br>');

// Remove a parameter that doesn't exist
url = URLParser(url).removeParam('myparam3');
document.write(url + ' - Remove a parameter that doesn\"t exist<br>');


Roshambo jQuery 메서드가 디코드 URL을 돌보지 않았습니다.

http://snipplr.com/view/26662/get-url-parameters-with-jquery--improved/

return 문을 추가하는 동안 해당 기능을 추가했습니다.

return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;

이제 업데이트 된 요지를 찾을 수 있습니다.

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) { return 0; }
return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0;
}

Ryan Phelan의 솔루션이 마음에 듭니다 . 하지만 jQuery를 확장 할 시점이 없다고 생각합니까? jQuery 기능은 사용하지 않습니다.

다른 한편으로는 Google 크롬의 내장 함수 window.location.getParameter를 좋아합니다.

그럼 왜 이것을 사용하지 않을까요? 다른 브라우저에는 없습니다. 이 함수가 존재하지 않으면 생성 해 봅시다 :

if (!window.location.getParameter ) {
  window.location.getParameter = function(key) {
    function parseParams() {
        var params = {},
            e,
            a = /\+/g,  // Regex for replacing addition symbol with a space
            r = /([^&=]+)=?([^&]*)/g,
            d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
            q = window.location.search.substring(1);

        while (e = r.exec(q))
            params[d(e[1])] = d(e[2]);

        return params;
    }

    if (!this.queryStringParams)
        this.queryStringParams = parseParams(); 

    return this.queryStringParams[key];
  };
}

이 함수는 다소 Ryan Phelan에게 있지만, 다른 이름으로되어 있고 다른 자바 스크립트 라이브러리의 의존성이 없습니다. 내 블로그에서이 기능에 대해 자세히 알아보십시오 .


나는 정규 표현식을 많이 사용한다.

내 응용 프로그램에서 쿼리 문자열을 한 번 읽고 모든 키 / 값 쌍의 개체를 만드는 것이 더 쉽고 효율적입니다.

var search = function() {
  var s = window.location.search.substr(1),
    p = s.split(/\&/), l = p.length, kv, r = {};
  if (l === 0) {return false;}
  while (l--) {
    kv = p[l].split(/\=/);
    r[kv[0]] = decodeURIComponent(kv[1] || '') || true;
  }
  return r;
}();

URL이 들어처럼 http://domain.com?param1=val1&param2=val2당신은 나중에 코드에서 자신의 가치를 얻을 수 있습니다 search.param1search.param2.


코드 골프 :

var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&");
for (var i in a) {
    var s = a[i].split("=");
    a[i]  = a[unescape(s[0])] = unescape(s[1]);
}

그것을 표시하십시오!

for (i in a) {
    document.write(i + ":" + a[i] + "<br/>");   
};

내 Mac : test.htm?i=can&has=cheezburger디스플레이

0:can
1:cheezburger
i:can
has:cheezburger

나는 이것을 좋아 한다 (jquery-howto.blogspot.co.uk에서 가져옴) :

// get an array with all querystring values
// example: var valor = getUrlVars()["valor"];
function getUrlVars() {
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for (var i = 0; i < hashes.length; i++) {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

나를 위해 위대한 작품.


에서 MDN이 :

function loadPageVar (sVar) {
  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}

alert(loadPageVar("name"));

우리는 방금 arg.js 배포 arg.js .이 프로젝트는이 문제를 해결하기위한 것입니다. 전통적으로 매우 어려웠지만 이제는 다음과 같이 할 수 있습니다.

var name = Arg.get("name");

또는 전체를 많이 얻는 것 :

var params = Arg.all();

당신은 차이점을 걱정하는 경우 ?query=true#hash=true다음은 사용할 수 있습니다 Arg.query()Arg.hash()방법을.


이것은 내가 잠시 뒤로 만든 함수이고 나는 꽤 만족합니다. 그것은 대소 문자를 구분하지 않습니다 - 어느 편리합니다. 또한 요청 된 QS가 없으면 빈 문자열 만 반환합니다.

나는 이것의 압축 된 버전을 사용한다. 나는 무슨 일이 일어나고 있는지 더 잘 설명하기 위해 초보자 용으로 압축되지 않은 채 게시하고 있습니다.

이 작업을 최적화하거나 다르게 작업하여 더 빠르게 작업 할 수 있다고 확신하지만 필자가 필요로하는 작업에는 항상 효과가 있습니다.

즐겨.

function getQSP(sName, sURL) {
    var theItmToRtn = "";
    var theSrchStrg = location.search;
    if (sURL) theSrchStrg = sURL;
    var sOrig = theSrchStrg;
    theSrchStrg = theSrchStrg.toUpperCase();
    sName = sName.toUpperCase();
    theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&";
    var theSrchToken = "&" + sName + "=";
    if (theSrchStrg.indexOf(theSrchToken) != -1) {
        var theSrchTokenLth = theSrchToken.length;
        var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth;
        var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart);
        theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign));
    }
    return unescape(theItmToRtn);
}

function GET() {
        var data = [];
        for(x = 0; x < arguments.length; ++x)
            data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1])
                return data;
    }


example:
data = GET("id","name","foo");
query string : ?id=3&name=jet&foo=b
returns:
    data[0] // 3
    data[1] // jet
    data[2] // b
or
    alert(GET("id")[0]) // return 3

function GetQueryStringParams(sParam)
{
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');

    for (var i = 0; i < sURLVariables.length; i++)
    {
        var sParameterName = sURLVariables[i].split('=');
        if (sParameterName[0] == sParam)
        {
            return sParameterName[1];
        }
    }
}​

그리고 URL을 가정하면이 함수를 사용할 수 있습니다.

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

var tech = GetQueryStringParams('stringtext');
var blog = GetQueryStringParams('stringword');




query-string