[JavaScript] Jak pobrać wartość zmiennej z adresu URL ?

Programowanie, Web Developer

Programując w Java Script i nie wykorzystując żadnych framework-ów okazuje się, że gdy chcemy pobrać wartość jakiejś zmiennej, która została przekazana w adresie URL nie mamy do tego dedykowanej metody. Oczywiście nic nie stoi na przeszkodzie, aby taką metodę napisać co nie jest bardzo trudne, gdyż założenie jest bardzo proste i sprowadza się do tego że mamy zmienną (która może być tablicą „zmienna[]”) za nią znak „=” a następnie wartość która kończy się na znaku „&” lub „#” lub końcu ciągu znaków.

Jako że nie jesteśmy pierwsi którzy potrzebujemy takiego rozwiązania więc możemy w internecie spotkać mnóstwo implementacji tego rozwiązania. Poniżej przedstawię kilka:

Metoda 1

Metoda ta nie jest doskonała, gdyż nie uwzględnia „#” jako końca ciągu znaków. Dlatego też proponuję używać jej tylko do bardzo prostych zastosowań lub skorzystanie z kolejnego przykładu.

<script type="text/javascript">

  window.GetQueryString = function(q) {
   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[hash[0]] = hash[1];
        }
        return vars;
  };

</script>

Sposób użycia:

<script type="text/javascript">

    //zakładamy że URL wygląda następująco: ?topic=123&name=query+string
    var params = GetQueryString();

    /**
     * params będzie wyglądał następująco:
     * 
     * ["topic": 123, "name": "query+string"]
     */

</script>

Metoda 2

<script type="text/javascript">

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

</script>

Sposób użycia:

<script type="text/javascript">

    //zakładamy że URL wygląda następująco: ?topic=123&name=query+string
    alert(getParameterByName("topic"));

</script>

Powyższy kod spowoduje wyświetlenie okna z wartością zmiennej „topic” czyli „123”.

Możliwość komentowania jest wyłączona.