Jak uzyskać ciąg zapytania z bieżącego adresu URL przy użyciu JavaScript?

Question

mam URL tak:

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

Co muszę zrobić, aby uzyskać szczegółowe informacje na ? po znaku zapytania (string) - że jest ProjectID=462. Jak mogę to uzyskać za pomocą JavaScript?

Co zrobiłem do tej pory to:

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

nie wiem, co robić dalej.

Answer 1

Spójrz na MDN article o window.location.

QueryString jest dostępny pod numerem window.location.search.

Rozwiązanie, które działają w przeglądarkach starszych, jak również

MDN podać przykład (nie jest już dostępny w wyżej wskazanym artykule) jak wartości wysiąść jeden klucz dostępny w QueryString. Coś takiego:

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

W nowoczesnych przeglądarek

W nowoczesnych przeglądarek masz własność interfejsu URL, który zwraca URLSearchParams obiekt searchParams. Zwrócony obiekt ma wiele wygodnych metod, w tym metodę get. Więc odpowiednikiem powyższego przykładu będzie:

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

Interfejs URLSearchParams mogą być również wykorzystywane do analizowania ciągów w formacie kwerendy i przekształcić je w poręczne URLSearchParams sprzeciwu.

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

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

Zauważ, że wsparcie przeglądarka jest nadal ograniczona do tego interfejsu, więc jeśli trzeba wspierać starszych przeglądarek, trzymać z pierwszego przykładu.

Answer 2

Można użyć właściwości search obiektu window.location, aby uzyskać część kwerendy adresu URL. Zauważ, że zawiera on znak zapytania (?) Na samym początku, na wszelki wypadek, który wpływa na to, jak zamierzasz go parsować.

Answer 3

Zastosowanie window.location.search aby wszystko po ?tym ?

Przykład:

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

Answer 4

To doda globalną funkcję dostępu do zmiennych kwerendy jako mapa.

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

Ciesz się.

Answer 5

Możesz użyć tej funkcji, aby podzielić ciąg z?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"); 

oto fiddle

Answer 6

Należy przyjrzeć API URL, który ma metody pomocnika do osiągnięcia tego celu w nim jak URLSearchParams: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

To nie jest aktualnie obsługiwany przez wszystkie nowoczesne przeglądarki, więc nie zapomnij polyfilować go (Polyfill dostępny za pomocą https://qa.polyfill.io/).

Answer 7

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

teraz masz część zapytania w ciągu kwerendy

najpierw wymienić usunie wszystkie białe spacje, drugi zastąpi wszystkie „&” część z „” i wreszcie trzeci zastąpić położy „: "w miejsce znaków" = ".

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

Więc powiedzmy, że masz zapytanie jak abc = 123 = 456 & EFG. Teraz przed analizą zapytanie jest przekształcane w coś takiego jak {"abc": "123", "efg": "456"}. Teraz, kiedy to przetworzysz, da ci zapytanie w obiekcie JSON.

Answer 8

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