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

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

업데이트 : 2018 년 9 월

간단하고 완벽하지만 브라우저를 지원하지 않는 URLSearchParams 를 사용할 수 있습니다 .

const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');

기발한

그런 목적으로 jQuery가 필요하지 않습니다. 순수한 JavaScript 만 사용할 수 있습니다.

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

용법:

// query string: ?foo=lorem&bar=&baz
var foo = getParameterByName('foo'); // "lorem"
var bar = getParameterByName('bar'); // "" (present with empty value)
var baz = getParameterByName('baz'); // "" (present with no value)
var qux = getParameterByName('qux'); // null (absent)

참고 : 매개 변수가 여러 번있는 경우 ( ?foo=lorem&foo=ipsum) 첫 번째 값 ( lorem)을 얻습니다 . 이에 대한 표준은 없으며 사용법은 다양합니다. 예를 들어 다음 질문을 참조하십시오 . 중복 HTTP GET 쿼리 키의 신뢰할 수있는 위치 .
참고 :이 기능은 대소 문자를 구분합니다. 대소 문자를 구분하지 않는 매개 변수 이름을 선호하는 경우 RegExp에 'i'수정자를 추가하십시오.

새로운 URLSearchParams 사양 을 기반으로 한 업데이트 로 더 간결하게 동일한 결과를 얻을 수 있습니다. 아래의 " URLSearchParams " 라는 답변을 참조하십시오 .

여기에 게시 된 솔루션 중 일부는 비효율적입니다. 스크립트가 매개 변수에 액세스해야 할 때마다 정규 표현식 검색을 반복하는 것은 완전히 불필요합니다. 매개 변수를 연관 배열 스타일 오브젝트로 분할하는 단일 함수로는 충분합니다. HTML 5 히스토리 API를 사용하지 않는 경우 페이지로드 당 한 번만 필요합니다. 여기에있는 다른 제안은 URL을 올바르게 디코딩하지 못합니다.

var urlParams;
(window.onpopstate = function () {
    var match,
        pl     = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
        query  = window.location.search.substring(1);

    urlParams = {};
    while (match = search.exec(query))
       urlParams[decode(match[1])] = decode(match[2]);
})();

쿼리 문자열 예 :

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

결과:

 urlParams = {
    enc: " Hello ",
    i: "main",
    mode: "front",
    sid: "de8d49b78a85a322c4155015fdce22c4",
    empty: ""
}

alert(urlParams["mode"]);
// -> "front"

alert("empty" in urlParams);
// -> true

배열 스타일 쿼리 문자열도 처리하도록 쉽게 개선 할 수 있습니다. 이것의 예는 여기 에 있지만 배열 스타일 매개 변수가 RFC 3986에 정의되어 있지 않기 때문에이 답변을 소스 코드로 오염시키지 않습니다. "오염 된"버전에 관심이있는 사람들은 아래의 campbeln의 답변을보십시오 .

또한 의견에서 지적했듯이 쌍 ;의 법적 구분 기호입니다 key=value. 처리하는 데 더 복잡한 정규 표현식이 필요합니다. ;또는 사용되는 &경우 ;는 드물기 때문에 불필요하다고 생각 하며 둘 다 사용 될 가능성이 훨씬 낮습니다. ;대신에 지원 해야하는 경우 &정규식으로 바꾸십시오.

<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>

훨씬 간단합니다!

업데이트

새로운 기능은 다음과 같이 반복되는 매개 변수를 검색하는 것 myparam=1&myparam=2입니다. 없다 규격은 그러나, 현재의 접근 방법의 대부분은 배열의 생성을 따르십시오.

myparam = ["1", "2"]

따라서 이것이 그것을 관리하는 접근법입니다.

let urlParams = {};
(window.onpopstate = function () {
    let match,
        pl = /\+/g,  // Regex for replacing addition symbol with a space
        search = /([^&=]+)=?([^&]*)/g,
        decode = function (s) {
            return decodeURIComponent(s.replace(pl, " "));
        },
        query = window.location.search.substring(1);

    while (match = search.exec(query)) {
        if (decode(match[1]) in urlParams) {
            if (!Array.isArray(urlParams[decode(match[1])])) {
                urlParams[decode(match[1])] = [urlParams[decode(match[1])]];
            }
            urlParams[decode(match[1])].push(decode(match[2]));
        } else {
            urlParams[decode(match[1])] = decode(match[2]);
        }
    }
})();

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('&'));

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

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]("=")(, 모양 indexOf은 문자의 위치를 ​​사용하여 키 / 값을 얻습니다). 분할하면 매개 변수에 값이 있는지 확인하고 값이 있으면 값을 저장하고 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 % 느림

Artem Barger의 답변 개선 버전 :

function getParameterByName(name) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

개선에 대한 자세한 정보는 http://james.padolsey.com/javascript/bujs-1-getparameterbyname/을 참조하십시오.

URLSearchParams

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

• 크롬 발표 및 세부 사항
• 오페라 발표 및 세부 사항
• Firefox 발표 및 세부 사항

안정적인 버전의 IE를위한 Google 추천 URLSearchParams 폴리 필 이 있습니다.

그것은 W3C 에 의해 표준화되지 않았지만, WhatWG에 의해 살아있는 표준 입니다.

당신은 그것을 사용할 수 있습니다 location:

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

.searchParamsURL 객체에서 속기 속성을 사용하여 다음과 같이 매개 변수를 얻을 수도 있습니다 .

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) {}.

참조 구현 과 샘플 페이지는 감사 및 테스트에 사용할 수 있습니다.

또 다른 권장 사항입니다. 플러그인 Purl을 사용하면 앵커, 호스트 등을 포함하여 URL의 모든 부분을 검색 할 수 있습니다.

jQuery를 사용하거나 사용하지 않고 사용할 수 있습니다.

사용법은 매우 간단하고 시원합니다.

var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version
var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.attr('protocol'); // returns 'http'
url.attr('path'); // returns '/folder/dir/index.html'

그러나 2014 년 11 월 11 일부터 Purl 은 더 이상 유지 관리되지 않으며 대신 URI.js 를 사용하는 것이 좋습니다 . jQuery 플러그인은 요소에 중점을 둔다는 점에서 다릅니다. 문자열을 사용하는 URI경우 jQuery를 사용하거나 사용하지 않고 직접 사용하십시오 . 유사 코드는, 풀러 문서로 보일 것이다 여기 :

var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version
url.protocol(); // returns 'http'
url.path(); // returns '/folder/dir/index.html'

tl; dr

다중 값 키 및 인코딩 된 문자 를 처리 하는 빠르고 완벽한 솔루션 입니다.

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)})

//using ES6   (23 characters cooler)
var qd = {};
if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)})

var qd = {};
if (location.search) location.search.substr(1).split("&").forEach(function(item) {
    var s = item.split("="),
        k = s[0],
        v = s[1] && decodeURIComponent(s[1]); //  null-coalescing / short-circuit
    //(k in qd) ? qd[k].push(v) : qd[k] = [v]
    (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit
})

이 코드는 무엇입니까?
"null-coalescing" , 단락 평가
ES6 구조 지정 할당 , 화살표 기능 , 템플릿 문자열

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"]

> qd.a[1]    // "5"
> qd["a"][1] // "5"

Vanilla JavaScript 솔루션에 대해 자세히 알아보십시오.

URL의 다른 부분에 액세스하려면 location.(search|hash)

가장 쉬운 (더미) 솔루션

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

• 빈 키를 올바르게 처리 합니다.
• 마지막 값을 찾은 다중 키 를 재 지정합니다 .

"?a=1&b=0&c=3&d&e&a=5"
> queryDict
a: "5"
b: "0"
c: "3"
d: undefined
e: undefined

다중 값 키

간단한 키 확인 (item in dict) ? dict.item.push(val) : dict.item = [val]

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]})

• 이제 대신 배열 을 반환 합니다 .
• qd.key[index]또는로 값에 액세스qd[key][index]

> qd
a: ["1", "5"]
b: ["0"]
c: ["3"]
d: [undefined]
e: [undefined]

인코딩 된 문자?

decodeURIComponent()두 번째 또는 두 스플릿에 사용하십시오 .

var qd = {};
location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]})

"?a=1&b=0&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab"
> qd
a: ["1", "5", "t e x t"]
b: ["0"]
c: ["3"]
d: ["undefined"]  // decodeURIComponent(undefined) returns "undefined" !!!*
e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"]

의견에서

* !!! decodeURIComponent(undefined)string 을 반환합니다 "undefined". 의 간단한 사용의 솔루션 거짓말 &&하는 보장 decodeURIComponent()정의되지 않은 값에 호출되지 않습니다. (맨 위의 "완전한 솔루션"을 참조하십시오.)

v = v && decodeURIComponent(v);

쿼리 문자열이 비어 있으면 ( location.search == "") 결과가 다소 잘못 qd == {"": undefined}됩니다. 다음과 같이 구문 분석 기능을 시작하기 전에 쿼리 문자열을 확인하는 것이 좋습니다.

if (location.search) location.search.substr(1).split("&").forEach(...)

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'); 하면 바로 알 수 있습니다.

UZBEKJON에는 이것에 대한 훌륭한 블로그 게시물이 있습니다. jQuery를 사용하여 URL 매개 변수 및 값을 가져옵니다 .

jQuery를 사용하는 경우 jQuery BBQ : Back Button & Query Library 와 같은 라이브러리를 사용할 수 있습니다 .

... 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();
                  
            }
        };

일반 JavaScript 만 사용하려면 다음을 사용할 수 있습니다.

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 히스토리 API와 구체적 history.pushState()으로history.replaceState() 으로 인해 URL이 변경되어 매개 변수 및 해당 값의 캐시가 무효화됩니다.

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

두 개의 분할을 사용하십시오 .

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

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

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;

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

두 세계의 최고!

단순히 쿼리 문자열을 구문 분석하는 것보다 더 많은 URL 조작을 수행하는 경우 URI.js가 도움 이 될 수 있습니다. URL 조작을위한 라이브러리이며 모든 종과 휘파람이 함께 제공됩니다. (자기 광고는 유감입니다)

검색어를지도로 변환하는 방법 :

var data = URI('?foo=bar&bar=baz&foo=world').query(true);
data == {
  "foo": ["bar", "world"],
  "bar": "baz"
}

(URI.js는 잘못된 쿼리 문자열을 "수정" ?&foo&&bar=baz&합니다 ?foo&bar=baz)

Ryan Phelan의 솔루션이 마음에 듭니다 . 그러나 jQuery를 확장 할 시점이 보이지 않습니까? jQuery 기능을 사용하지 않습니다.

반면에 Chrome의 내장 기능인 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과 거의 비슷하지만 다른 자바 스크립트 라이브러리의 명확한 이름과 종속성이 없습니다. 내 블로그에서이 기능에 대해 자세히 알아보십시오 .

다음은 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"
}

일반 JavaScript 코드로 간단하게 유지하십시오.

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

이것들은 모두 훌륭한 답변이지만 조금 더 강력한 것이 필요했으며 모두 내가 만든 것을 갖고 싶어 할 것이라고 생각했습니다.

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

• getHost
• getPath
• getHash
• 해시
• 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>');

에서 MDN이 :

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

alert(loadPageVar("name"));

코드 골프 :

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

나는 정규 표현식을 많이 사용하지만 그렇게하지는 않습니다.

내 응용 프로그램에서 쿼리 문자열을 한 번 읽고 다음과 같이 모든 키 / 값 쌍에서 객체를 작성하는 것이 더 쉽고 효율적입니다.

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.param1및 로 값을 얻을 수 있습니다 search.param2.

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

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

나는 이것을 좋아 한다 (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;
}

나를 위해 잘 작동합니다.

값이없는 키로 쿼리 문자열을 구문 분석하는 기능이 추가 되어이 훌륭한 답변을 편집했습니다 .

var url = 'http://sb.com/reg/step1?param';
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[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " "));
        b[p[0]] = p[1];
    }
    return b;
})((url.split('?'))[1].split('&'));

중대한! 마지막 행에서 해당 기능의 매개 변수가 다릅니다. 임의의 URL을 전달할 수있는 방법에 대한 예일뿐입니다. Bruno의 답변에서 마지막 줄을 사용하여 현재 URL을 구문 분석 할 수 있습니다.

정확히 무엇이 바뀌 었습니까? URL로 http://sb.com/reg/step1?param=결과는 동일합니다. 그러나 URL을 사용하면 http://sb.com/reg/step1?paramBruno의 솔루션이 키가없는 객체를 반환하는 반면 광산은 키 param와 undefined값이 있는 객체를 반환합니다 .

쿼리 문자열의 객체가 필요했고 많은 코드가 싫어요. 우주에서 가장 강력하지는 않지만 몇 줄의 코드 일뿐입니다.

var q = {};
location.href.split('?')[1].split('&').forEach(function(i){
    q[i.split('=')[0]]=i.split('=')[1];
});

다음과 같은 URL this.htm?hello=world&foo=bar이 생성됩니다.

{hello:'world', foo:'bar'}

다음은 Andy E의 링크 된 "핸들 배열 스타일 쿼리 문자열"버전의 확장 버전입니다. 버그 수정 ( ?key=1&key[]=2&key[]=3; 1을 잃어버린으로 대체 [2,3]), 몇 가지 사소한 성능 개선 (값 다시 디코딩, "["위치 재 계산 등)을 수행하고 여러 가지 개선 사항 (기능화, 지원 ?key=1&key=2, ;구분 기호 지원 )을 추가했습니다. . 나는 변수를 귀찮게 짧게 놔두었지만, 읽을 수 있도록 많은 코멘트를 추가했다. (오, 나는 v지역 함수 내에서 재사용 했다.

다음 쿼리 문자열을 처리합니다 ...

? test = Hello & person = neek & person [] = jeff & person [] = jim & person [extra] = john & test3 & nocache = 1398914891264

... 이것처럼 보이는 물체로 만들기 ...

{
    "test": "Hello",
    "person": {
        "0": "neek",
        "1": "jeff",
        "2": "jim",
        "length": 3,
        "extra": "john"
    },
    "test3": "",
    "nocache": "1398914891264"
}

위에서 볼 수 있듯이,이 버전 핸들 "잘못된"배열, 즉 어느 정도 - person=neek&person[]=jeff&person[]=jim나 person=neek&person=jeff&person=jim키가 (적어도 후에 .NET의에 식별 및 유효로 NameValueCollection.Add ) :

지정된 키가 대상 NameValueCollection 인스턴스에 이미 존재하면 지정된 값이 "value1, value2, value3"형식으로 기존 쉼표로 구분 된 값 목록에 추가됩니다.

스펙이 없기 때문에 배심원이 반복되는 키에 다소 빠져있는 것 같습니다 . 이 경우 여러 키가 (가짜) 배열로 저장됩니다. 그러나 쉼표를 기준으로 값을 배열로 처리 하지 않습니다 .

코드:

getQueryStringKey = function(key) {
    return getQueryStringAsObject()[key];
};


getQueryStringAsObject = function() {
    var b, cv, e, k, ma, sk, v, r = {},
        d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue)
        q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)),
        s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter:   /([^&=]+)=?([^&]*)/g
    ;

    //# ma(make array) out of the v(alue)
    ma = function(v) {
        //# If the passed v(alue) hasn't been setup as an object
        if (typeof v != "object") {
            //# Grab the cv(current value) then setup the v(alue) as an object
            cv = v;
            v = {};
            v.length = 0;

            //# If there was a cv(current value), .push it into the new v(alue)'s array
            //#     NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value
            if (cv) { Array.prototype.push.call(v, cv); }
        }
        return v;
    };

    //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)...
    while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) {
        //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) 
        b = e[1].indexOf("[");
        v = d(e[2]);

        //# As long as this is NOT a hash[]-style key-value e(ntry)
        if (b < 0) { //# b == "-1"
            //# d(ecode) the simple k(ey)
            k = d(e[1]);

            //# If the k(ey) already exists
            if (r[k]) {
                //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value)
                r[k] = ma(r[k]);
                Array.prototype.push.call(r[k], v);
            }
            //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value)
            else {
                r[k] = v;
            }
        }
        //# Else we've got ourselves a hash[]-style key-value e(ntry) 
        else {
            //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations
            k = d(e[1].slice(0, b));
            sk = d(e[1].slice(b + 1, e[1].indexOf("]", b)));

            //# ma(make array) out of the k(ey) 
            r[k] = ma(r[k]);

            //# If we have a sk(sub-key), plug the v(alue) into it
            if (sk) { r[k][sk] = v; }
            //# Else .push the v(alue) into the k(ey)'s array
            else { Array.prototype.push.call(r[k], v); }
        }
    }

    //# Return the r(eturn value)
    return r;
};

이것은 내가 옛날에 만든 기능이며 꽤 행복합니다. 대소 문자를 구분하지 않으므로 편리합니다. 또한 요청 된 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);
}

우리는 방금 이 문제를 해결하기위한 프로젝트 arg.js를 출시 했습니다 . 전통적으로 너무 어려웠지만 이제는 할 수 있습니다.

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

또는 전체를 얻는 것 :

var params = Arg.all();

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

이 질문에 대한 가장 큰 대답은 # 뒤에 붙은 지원되지 않는 매개 변수이지만 때로는이 값을 가져와야한다는 것입니다.

해시 기호로 전체 쿼리 문자열을 구문 분석 할 수 있도록 답변을 수정했습니다.

var getQueryStringData = function(name) {
    var result = null;
    var regexS = "[\\?&#]" + name + "=([^&#]*)";
    var regex = new RegExp(regexS);
    var results = regex.exec('?' + window.location.href.split('?')[1]);
    if (results != null) {
        result = decodeURIComponent(results[1].replace(/\+/g, " "));
    }
    return result;
};

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

Browserify를 사용하는 경우 Node.js 의 url모듈을 사용할 수 있습니다 .

var url = require('url');

url.parse('http://example.com/?bob=123', true).query;

// returns { "bob": "123" }

추가 자료 : URL Node.js v0.12.2 매뉴얼 및 문서

편집 : URL 인터페이스 를 사용할 수 있습니다 . 거의 모든 새 브라우저에서 널리 채택되어 있으며 코드가 이전 브라우저에서 실행될 경우 이와 같은 polyfill을 사용할 수 있습니다 . 다음은 URL 인터페이스를 사용하여 검색어 매개 변수 (일명 검색 매개 변수)를 얻는 방법에 대한 코드 예입니다.

const url = new URL('http://example.com/?bob=123');
url.searchParams.get('bob'); 

URLSearchParams를 사용할 수도 있습니다. 다음은 URLSearchParams 로 수행하는 MDN의 예입니다 .

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

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

searchParams.has("topic") === true; // true
searchParams.get("topic") === "api"; // true
searchParams.getAll("topic"); // ["api"]
searchParams.get("foo") === null; // true
searchParams.append("topic", "webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
searchParams.set("topic", "More webdev");
searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
searchParams.delete("topic");
searchParams.toString(); // "q=URLUtils.searchParams"