jQuery를 통해(또는 없이) 쿼리 문자열 값을 검색하는 플러그인 없는 방법이 있습니까?
그렇다면 어떻게? 그렇지 않다면 그렇게 할 수 있는 플러그인이 있습니까?
반응형
질문자 :Community Wiki
업데이트: 2021년 6월
모든 쿼리 매개변수가 필요한 특정 경우:
const urlSearchParams = new URLSearchParams(window.location.search); const params = Object.fromEntries(urlSearchParams.entries());업데이트: 2018년 9월
간단하고 적절한(완전하지는 않지만) 브라우저 지원을 제공 하는 URLSearchParams 를 사용할 수 있습니다.
const urlParams = new URLSearchParams(window.location.search); const myParam = urlParams.get('myParam');원래의
그 목적을 위해 jQuery가 필요하지 않습니다. 순수한 JavaScript만 사용할 수 있습니다.
function getParameterByName(name, 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' 수정자를 추가하십시오.
참고: no-useless-escape eslint 오류가 발생하면 name = name.replace(/[\[\]]/g, '\\$&'); name = name.replace(/[[\]]/g, '\\$&') .
이것은 동일한 결과를 보다 간결하게 달성하기 위해 새로운 URLSearchParams 사양 을 기반으로 하는 업데이트입니다. 아래의 " URLSearchParams "라는 제목의 답변을 참조하세요.
Community Wiki
여기에 게시된 일부 솔루션은 비효율적입니다. 스크립트가 매개변수에 액세스해야 할 때마다 정규식 검색을 반복하는 것은 완전히 불필요하며 매개변수를 연관 배열 스타일 객체로 분할하는 단일 함수로 충분합니다. HTML 5 History 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이것은 배열 스타일 쿼리 문자열도 처리하기 위해 쉽게 개선될 수 있습니다. 이것의 예는 here 이지만 배열 스타일 매개 변수는 RFC 3986에 정의되어 있지 않기 때문에 이 답변을 소스 코드로 더럽히지 않을 것입니다. "오염된" 버전에 관심이 있는 경우 아래 campbeln의 답변을 참조하십시오 .
또한 의견에서 지적했듯이 ; key=value 쌍에 대한 올바른 구분 기호입니다. 처리하려면 더 복잡한 정규식이 필요합니다 ; 또는 & 는 드물기 때문에 불필요하다고 생각합니다 ; 사용되며 둘 다 사용되지 않을 가능성이 훨씬 더 높습니다. 지원해야 하는 경우 ; & 대신 정규식에서 바꾸십시오.
서버 측 전처리 언어를 사용하는 경우 기본 JSON 함수를 사용하여 무거운 작업을 수행할 수 있습니다. 예를 들어, PHP에서는 다음과 같이 작성할 수 있습니다.
<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]); } } })();Community Wiki
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]("=") 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¶m2=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% 더 느림
Community Wiki
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/을 참조하십시오.
Community Wiki
URL검색 매개변수
Firefox 44+, Opera 36+, Edge 17+, Safari 10.3+ 및 Chrome 49+는 URLSearchParams API를 지원합니다.
안정적인 버전의 IE에 대해 Google에서 제안한 URLSearchParams 폴리필이 있습니다.
W3C 에서 표준화한 것은 아니지만 WhatWG 에서는 생활 표준입니다.
location 사용할 수 있습니다.
const params = new URLSearchParams(location.search);또는
const params = (new URL(location)).searchParams;또는 물론 모든 URL에서:
const url = new URL('https://example.com?foo=1&bar=2'); const params = new URLSearchParams(url.search); 다음과 같이 URL 개체 .searchParams 속성을 사용하여 params를 가져올 수도 있습니다.
const 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) {} 모든 값을 반복할 수도 있습니다.
감사 및 테스트를 위해 참조 구현 및 샘플 페이지를 사용할 수 있습니다.
Community Wiki
또 다른 권장 사항입니다. 플러그인 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 플러그인은 요소에 초점을 맞춘다는 점에서 다릅니다. 문자열과 함께 사용하려면 jQuery를 사용하거나 사용하지 않고 URI 유사한 코드는 다음과 같이 보일 것입니다. 완전한 문서는 다음과 같습니다 .
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'Community Wiki
헐 박사
다중값 키 및 인코딩된 문자 를 처리하는 빠르고 완벽한 솔루션 입니다.
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", "text"] 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"바닐라 자바스크립트 솔루션에 대해 더 읽어보세요.
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", "text"] 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) "undefined" 문자열을 반환합니다. && 의 간단한 사용법에 있습니다. 이는 decodeURIComponent() 가 정의되지 않은 값에 대해 호출되지 않도록 합니다. (상단의 "완전한 솔루션"을 참조하십시오.)
v = v && decodeURIComponent(v);
쿼리 문자열이 비어 있는 경우( location.search == "" ), 결과는 다소 오해의 소지가 있는 qd == {"": undefined} 입니다. 다음과 같이 구문 분석 기능을 시작하기 전에 쿼리 문자열을 확인하는 것이 좋습니다.
if (location.search) location.search.substr(1).split("&").forEach(...)Community Wiki
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 매개변수 및 값 가져오기에 대한 훌륭한 블로그 게시물도 있습니다.
Community Wiki
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이 변경되어 매개변수 및 해당 값의 캐시가 무효화될 수 있습니다.
이 버전은 기록이 변경될 때마다 매개변수의 내부 캐시를 업데이트합니다.
Community Wiki
두 개의 분할을 사용하십시오.
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의 반대 사례에 부딪히지 않을 것임을 안다면 이것이 승리합니다. 그렇지 않으면 정규 표현식.
또는 쿼리 문자열을 제어할 수 있고 가져오려는 값에 URL 인코딩된 문자가 전혀 포함되지 않는다고 보장할 수 있는 경우(값에 이러한 문자를 포함하는 것은 좋지 않음) - 다음과 같이 약간 더 단순하고 읽기 쉬운 버전을 사용할 수 있습니다. 첫 번째 옵션:
function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null;
Community Wiki
다음은 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');두 세계의 최고!
Community Wiki
단순히 쿼리 문자열을 구문 분석하는 것보다 더 많은 URL 조작을 수행하는 경우 URI.js가 도움이 될 수 있습니다. URL을 조작하기 위한 라이브러리이며 모든 종소리와 함께 제공됩니다. (여기서 자기광고 죄송합니다)
쿼리 문자열을 지도로 변환하려면:
var data = URI('?foo=bar&bar=baz&foo=world').query(true); data == { "foo": ["bar", "world"], "bar": "baz" } ?&foo&&bar=baz& 와 같은 잘못된 쿼리 문자열을 ?foo&bar=baz "수정"합니다)
Community Wiki
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의 것이지만 다른 방식으로 래핑됩니다. 이름이 명확하고 다른 자바스크립트 라이브러리의 종속성이 없습니다. 내 블로그에서 이 기능에 대해 자세히 알아보십시오 .
Community Wiki
일반 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');Community Wiki
다음은 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" }Community Wiki
이것들은 모두 훌륭한 답변이지만 저는 좀 더 강력한 것이 필요했고 여러분 모두가 제가 만든 것을 갖고 싶어할 것이라고 생각했습니다.
URL 매개변수의 해부 및 조작을 수행하는 간단한 라이브러리 메소드입니다. 정적 메서드에는 제목 URL에서 호출할 수 있는 다음과 같은 하위 메서드가 있습니다.
- getHost
- getPath
- getHash
- setHash
- getParams
- getQuery
- setParam
- getParam
- hasParam
- 제거 매개변수
예시:
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>');Community Wiki
MDN에서 :
function loadPageVar (sVar) { return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); } alert(loadPageVar("name"));Community Wiki
코드 골프:
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:cheezburgerCommunity Wiki
정규 표현식을 많이 사용하지만, 그렇지 않습니다.
내 애플리케이션에서 쿼리 문자열을 한 번 읽고 다음과 같은 모든 키/값 쌍에서 개체를 빌드하는 것이 더 쉽고 효율적으로 보입니다.
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; }(); http://domain.com?param1=val1¶m2=val2 와 같은 URL search.param1 및 search.param2 로 값을 얻을 수 있습니다.
Community Wiki
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 3Community Wiki
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; }Community Wiki
나는 이것을 좋아 한다 (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; }나를 위해 잘 작동합니다.
Community Wiki
값이 없는 키로 쿼리 문자열을 구문 분석하는 기능이 추가된 이 훌륭한 답변에 대한 편집 내용은 다음과 같습니다.
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?param Bruno의 솔루션은 키가 없는 객체를 반환하는 반면 광산은 키 param 와 undefined 값이 있는 객체를 반환합니다.
Community Wiki
쿼리 문자열에서 개체가 필요했고 많은 코드를 싫어합니다. 이것은 우주에서 가장 강력하지는 않지만 몇 줄의 코드에 불과합니다.
var q = {}; location.href.split('?')[1].split('&').forEach(function(i){ q[i.split('=')[0]]=i.split('=')[1]; }); this.htm?hello=world&foo=bar 와 같은 URL은 다음을 생성합니다.
{hello:'world', foo:'bar'}Community Wiki
다음은 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; };Community Wiki
이것은 내가 얼마 전에 만든 기능이며 매우 만족합니다. 대소문자를 구분하지 않으므로 편리합니다. 또한 요청한 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); }Community Wiki
우리는 이 문제를 완전히 해결하는 것을 목표로 하는 프로젝트인 arg.js를 방금 출시했습니다. 전통적으로 매우 어려웠지만 이제 다음을 수행할 수 있습니다.
var name = Arg.get("name");또는 전체를 얻기:
var params = Arg.all(); ?query=true 와 #hash=true 의 차이점에 관심이 있다면 Arg.query() 및 Arg.hash() 메서드를 사용할 수 있습니다.
Community Wiki
해당 질문에 대한 최상위 답변의 문제는 # 뒤에 배치된 지원되지 않는 매개변수이지만 때로는 이 값도 가져와야 한다는 것입니다.
해시 기호가 있는 전체 쿼리 문자열도 구문 분석할 수 있도록 답변을 수정했습니다.
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; };Community Wiki
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 인터페이스를 사용할 수 있으며 코드가 이전 브라우저에서 실행될 경우 이와 같은 폴리필을 사용할 수 있습니다. 다음은 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"Community Wiki
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');Community Wiki
출처 : http:www.stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| 설치된 npm 패키지의 버전 찾기 (0) | 2021.11.13 |
|---|---|
| 단일 비트를 어떻게 설정, 지우고 토글합니까? (0) | 2021.11.11 |
| 요소 외부의 클릭을 어떻게 감지합니까? (0) | 2021.11.11 |
| JavaScript를 사용하여 JSON 예쁘게 인쇄하기 (0) | 2021.11.11 |
| HTML5 localStorage에 객체 저장하기 (0) | 2021.11.11 |