JavaScript에서 쿼리 문자열 값을 어떻게 얻을 수 있습니까?
질문
jQuery를 통해 쿼리 문자열 값을 검색하는 플러그인 덜 방법이 있습니까?
그렇다면 어떻게?그렇지 않다면, 그렇게 할 수있는 플러그인이 있습니까?
답변
업데이트 : JAN-2022.
proxy ()를 사용하는 것은 Object.FromEntries ()를 사용하고 더 잘 지원되는 것보다 더 많은 성능입니다.
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
// Get the value of "some_key" in eg "https://example.com/?some_key=some_value"
let value = params.some_key; // "some_value"
업데이트 : 6 월 - 2021.
모든 쿼리 매개 변수가 필요할 때 특정 경우에 대해서는 다음과 같습니다.
const urlSearchParams = new URLSearchParams(window.location.search);
const params = Object.fromEntries(urlSearchParams.entries());
업데이트 : Sep-2018.
단순한 URLSearchParams를 사용할 수 있으며 괜찮은 브라우저 지원을 괜찮습니다 (완전하지 않음).
const urlParams = new URLSearchParams(window.location.search);
const myParam = urlParams.get('myParam');
원래의
그 목적을 위해 jQuery가 필요하지 않습니다.순수한 자바 스크립트를 사용할 수 있습니다.
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 쿼리 키의 권위있는 위치.
참고 : 함수는 대소 문자를 구분합니다.대소 문자를 구분하지 않는 매개 변수 이름을 선호하는 경우, 'i'수정자를 regexp에 추가하십시오.
참고 : us-usseless-escape eslint 오류가 발생하면 name = name.replace (/ [\ \ \]] / g, '\\ $ &'를 대체 할 수 있습니다.name = name.replace (/ [[\]] / g, '\\ $ &').
이것은 동일한 결과를 더욱 간결하게 수행하기 위해 새로운 URLSearchParams 사양을 기반으로 한 업데이트입니다.아래의 "URLSearchParams"라는 답변을 참조하십시오.
답변
여기에 게시 된 일부 솔루션은 비효율적입니다.정규 표현식 검색 반복 스크립트가 매개 변수에 액세스해야 할 때마다 완전히 불필요한 것은 완전히 불필요합니다. 매개 변수를 연관 배열 스타일 객체로 분리하는 하나의 단일 함수가 충분합니다.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]);
})();
예제 QueryString :
? 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 쌍에 대한 법적 구분 기호입니다.그것은 더 복잡한 정규식을 처리해야합니다.또는 그것이 드물게하기 때문에 불필요한 것 같아요.사용되며 두 가지가 모두 사용될 것 같지 않을 것입니다.지원 해야하는 경우;& &, regex에서 그들을 바꿀 수 있습니다.
<script>var urlParams = <?php echo json_encode($_GET, JSON_HEX_TAG);?>;</script>
훨씬 간단합니다!
#updated.
새로운 기능은 다음과 같이 반복되는 매개 변수를 검색하는 것입니다. 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과 같은 URL을 사용하면 topic = 123 & name = query + string, 다음은 반환됩니다.
qs["topic"]; // 123
qs["name"]; // query string
qs["nothere"]; // undefined (object)
Google 방법
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] ( "=") (인덱스처럼 보이는 것처럼 보이는 경우, 키 / 값을 가져 오려면 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));
성능 테스트 (regex 메소드에 대한 분할 방법) (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 % 가장 빠릅니다 Regex 방법 : 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 지원 :
크롬 발표 및 세부 사항 오페라 발표 및 세부 사항 파이어 폭스 발표 및 세부 사항
안정적인 버전의 경우 Google에서 제안 된 URLSearchParams Polyfill이 있습니다.
W3C에서 표준화되지는 않지만 Whatwg의 생활 수준입니다.
위치에서 사용할 수 있습니다.
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 객체의 ShortHand .searchParams 속성을 사용하여 매개 변수를 가져올 수 있습니다.
const params = new URL('https://example.com?foo=1&bar=2').searchParams;
params.get('foo'); // "1"
params.get('bar'); // "2"
get (키), 설정 (키, 값), append (키, 값) API를 통해 매개 변수를 읽거나 설정합니다.또한 모든 값을 (params의 p lel 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 플러그인은 요소에 초점을 맞추는 것과 다릅니다. 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'
출처:https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
최근댓글