JavaScript를 사용하여 현재 URL에서 쿼리 문자열을 얻는 방법은 무엇입니까?

Question

나는 다음과 같은 URL이 있습니다

http://localhost/PMApp/temp.htm?ProjectID=462 

은 내가해야 할 것은 ? 기호 (쿼리 문자열) 후 세부 얻는 것입니다 - 그 ProjectID=462입니다. JavaScript를 사용하여 어떻게 얻을 수 있습니까? 내가 지금까지했던 어떤

은 이것이다 :

var url = window.location.toString(); 
url.match(?); 

나는 다음에 무엇을 모른다.

Answer 1

MDN article 약 window.location을 살펴보십시오.

QueryString은 window.location.search에서 사용할 수 있습니다. 뿐만 아니라 기존의 브라우저에서

MDN을 작동

솔루션은 예 의 (더 이상 사용할 수 위의 참조 문서)을 제공하는 방법 QueryString을에서 하나의 키 사용할 수의 GET 값. 이런 식으로 뭔가 :

function getQueryStringValue (key) { 
    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); 
} 

// Would write the value of the QueryString-variable called name to the console 
console.log(getQueryStringValue("name")); 

최신 브라우저 최신 브라우저에서

에서 당신은 URLSearchParams 객체를 반환하는 URL 인터페이스의 searchParams 속성이 있습니다. 반환 된 객체에는 get-method를 비롯한 편리한 메소드가 많이 있습니다. 따라서 위의 예에 해당은 다음과 같습니다

let params = (new URL(document.location)).searchParams; 
let name = params.get("name"); 

URLSearchParams 인터페이스는 또한 쿼리 문자열 형식으로 문자열을 구문 분석하는 데 사용하고, 편리한 URLSearchParams 객체로 만들어 놓을 수 있습니다. 당신은, 기존의 브라우저를 지원하는 첫 번째 예제를 고수 할 필요가 그래서 만약 브라우저 지원은 여전히,이 인터페이스에 제한된다

let paramsString = "name=foo&age=1337" 
let searchParams = new URLSearchParams(paramsString); 

searchParams.has("name") === true; // true 
searchParams.get("age") === "1337"; // true 

알 수 있습니다.

Answer 2

window.location 개체의 search 속성을 사용하여 URL의 쿼리 부분을 얻을 수 있습니다. 처음에 물음표 (?)가 포함되어 있으므로 구문 분석 방법에 영향을 줄 수 있습니다. ?이 ?

예를 포함한 후

Answer 3

사용 window.location.search 모든 것을 얻을 :

var url = window.location.search; 
url = url.replace("?", ''); // remove the ? 
alert(url); //alerts ProjectID=462 is your case 

Answer 4

이지도로 쿼리 문자열 변수에 액세스 할 수있는 전역 함수를 추가합니다.

// ------------------------------------------------------------------------------------- 
// Add function for 'window.location.query([queryString])' which returns an object 
// of querystring keys and their values. An optional string parameter can be used as 
// an alternative to 'window.location.search'. 
// ------------------------------------------------------------------------------------- 
// Add function for 'window.location.query.makeString(object, [addQuestionMark])' 
// which returns a queryString from an object. An optional boolean parameter can be 
// used to toggle a leading question mark. 
// ------------------------------------------------------------------------------------- 
if (!window.location.query) { 
    window.location.query = function (source) { 
     var map = {}; 
     source = source || this.search; 

     if ("" != source) { 
      var groups = source, i; 

      if (groups.indexOf("?") == 0) { 
       groups = groups.substr(1); 
      } 

      groups = groups.split("&"); 

      for (i in groups) { 
       source = groups[i].split("=", 
        // For: xxx=, Prevents: [xxx, ""], Forces: [xxx] 
        (groups[i].slice(-1) !== "=") + 1 
       ); 

       // Key 
       i = decodeURIComponent(source[0]); 

       // Value 
       source = source[1]; 
       source = typeof source === "undefined" 
        ? source 
        : decodeURIComponent(source); 

       // Save Duplicate Key 
       if (i in map) { 
        if (Object.prototype.toString.call(map[i]) !== "[object Array]") { 
         map[i] = [map[i]]; 
        } 

        map[i].push(source); 
       } 

       // Save New Key 
       else { 
        map[i] = source; 
       } 
      } 
     } 

     return map; 
    } 

    window.location.query.makeString = function (source, addQuestionMark) { 
     var str = "", i, ii, key; 

     if (typeof source == "boolean") { 
      addQuestionMark = source; 
      source = undefined; 
     } 

     if (source == undefined) { 
      str = window.location.search; 
     } 
     else { 
      for (i in source) { 
       key = "&" + encodeURIComponent(i); 

       if (Object.prototype.toString.call(source[i]) !== "[object Array]") { 
        str += key + addUndefindedValue(source[i]); 
       } 
       else { 
        for (ii = 0; ii < source[i].length; ii++) { 
         str += key + addUndefindedValue(source[i][ii]); 
        } 
       } 
      } 
     } 

     return (addQuestionMark === false ? "" : "?") + str.substr(1); 
    } 

    function addUndefindedValue(source) { 
     return typeof source === "undefined" 
      ? "" 
      : "=" + encodeURIComponent(source); 
    } 
} 

즐기십시오.

Answer 5

분할 문자열에이 기능을 사용할 수 있습니까?ID는 = 여기

function myfunction(myvar){ 
    var urls = myvar; 
    var myurls = urls.split("?id="); 
    var mylasturls = myurls[1]; 
    var mynexturls = mylasturls.split("&"); 
    var url = mynexturls[0]; 
    alert(url) 
} 
myfunction(window.top.location.href); 
myfunction("http://www.myname.com/index.html?id=dance&emp;cid=in_social_facebook-hhp-food-moonlight-influencer_s7_20160623"); 

는 당신은 URLSearchParams로 이것을 달성하기 위해 도우미 메서드가있는 URL의 API를 살펴해야 fiddle

Answer 6

: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

이 현재 지원되지 않습니다 모든 최신 브라우저가 있으므로 polyfill하는 것을 잊지 마세요 (Polyfill은 https://qa.polyfill.io/을 사용하여 사용 가능합니다). 지금

Answer 7

var queryObj = {}; 
    if(url.split("?").length>0){ 
    var queryString = url.split("?")[1]; 
    } 

당신이

먼저 모든 공백을 제거합니다 대체 검색어 문자열에서 쿼리 부분을, 두 번째는 ","와 모든 '&'부품을 교체하고 마지막으로 세 번째는 "둘 것이다 대체 : "="표지 대신에.

queryObj = JSON.parse('{"' + queryString.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}') 

그래서 당신은 ABC = 123 & EFG = 456 같은 쿼리를 가지고 가정 해 봅시다. 이제 파싱하기 전에 쿼리가 { "abc": "123", "efg": "456"}과 같은 것으로 변환됩니다. 이제 이것을 구문 분석하면 json 객체에서 쿼리가 제공됩니다.

Answer 8

window.location.href.slice(window.location.href.indexOf('?') + 1);