JS URL splitten und Parameter beim öffnen direkt ausgeben

nubba · 15. Juli 2020

Hallo,

ich möchte eine URL in ihre Einzelteile zerlegen und beim öffnen des Dokuments ausgeben. (z. B. http://www.example.com?test=asdf&test2=jklw)

Das Resultat soll folgendermaßen aussehen:

http://www.example.com
test=asdf
test2=jklw

Hier der Code soweit.
href und erste Scriptzeile ist zur Kontrolle der URL gedacht. Leider klappt die Ausgabe bei 'results' nicht.

Wenn ich die URL über eine Input-Box manuell eingebe dann funktionierts, es soll aber beim öffnen der Datei schon passieren.

Danke für eure Hilfe

Code

<body>
<p id="href"></p>

<script>
document.getElementById("href").innerHTML = "Ganze URL:<br>" + window.location.href;

var alles = window.location.href

function getAllUrlParams(url) {
var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
var obj = {};

if (queryString) {
queryString = queryString.split('#')[0];
var arr = queryString.split('&');

for (var i = 0; i < arr.length; i++) {
var a = arr[i].split('=');
var paramName = a[0];
var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

if (paramName.match(/\[(\d+)?\]$/)) {
var key = paramName.replace(/\[(\d+)?\]/, '');
if (!obj[key]) obj[key] = [];

if (paramName.match(/\[\d+\]$/)) {
var index = /\[(\d+)\]/.exec(paramName)[1];
obj[key][index] = paramValue;
} else {
obj[key].push(paramValue);
}
} else {
if (!obj[paramName]) {
obj[paramName] = paramValue;
} else if (obj[paramName] && typeof obj[paramName] === 'string'){
obj[paramName] = [obj[paramName]];
obj[paramName].push(paramValue);
} else {
obj[paramName].push(paramValue);
}
}
}
}

return obj;
}

var params = document.getElementById('alles');
var results = document.getElementById('results');

function asdf(alles) {
params.innerText = this.value;
results.innerText = JSON.stringify(getAllUrlParams("http://www.example.de/?" + this.value), null, 2);
}


;

</script>
<span id="params"></span>
<pre id="results">{}</pre>
</body>

Alles anzeigen

Sempervivum · 15. Juli 2020

In modernen Browsern wird das durch URLSearchParams unterstützt und ist dann viel einfacher, siehe hier:

https://developer.mozilla.org/…s/Web/API/URLSearchParams

nubba · 15. Juli 2020

Hallo,

danke für deine Hilfe. Die Funktion an sich steht ja, ich bekomme ja auch eine Ausgabe bei manueller Eingabe wenn ich dies per ID ansteuere. In diesem Fall möchte ich eigentlich nur die URL verwenden die in der Adresszeile steht anstelle dessen.

Ich nehme an das ich einen einfachen Syntaxfehler habe und diesen einfach nicht finde.

basti1012 · 15. Juli 2020

Dann zeig doch mal dein Code ,vieleicht finden wir den Fehler ja.

Kannst du kein Php nutzen um die GET Parameter aus der Url zu lesen ?

nubba · 16. Juli 2020

Hallo,

danke für deine Antwort. Der Code steht oben im ersten Post, oder meinst du etwas anderes?

PHP geht leider nicht, da interne Richtlinie, da kann ich nichts dran ändern.

MIt window.location.href bekomme ich ja die ganze URL und mit window.location.search auch exakt den Teil den ich brauche. WIe gesagt, das funktioniert ja.

Hier mal der funktionierende Teil mit der InputBox, was mir nun fehlt und ich versucht habe mit dem Code im ersten Post zu handeln, ist das die URL nicht eingegeben werden muss sondern sich diese direkt aus der Adresszeile ziehen soll.

Code

<body>
<span id="params"></span>
<p><input placeholder="URL Parameter" /></p>
<pre id="results">{}</pre>

<script>

 function getAllUrlParams(url) {
  var queryString = url ? url.split('?')[1] : window.location.search.slice(1);
  var obj = {};

  if (queryString) {
    queryString = queryString.split('#')[0];
    var arr = queryString.split('&');

    for (var i = 0; i < arr.length; i++) {
      var a = arr[i].split('=');
      var paramName = a[0];
      var paramValue = typeof (a[1]) === 'undefined' ? true : a[1];

      if (paramName.match(/\[(\d+)?\]$/)) {
        var key = paramName.replace(/\[(\d+)?\]/, '');
        if (!obj[key]) obj[key] = [];

        if (paramName.match(/\[\d+\]$/)) {
          var index = /\[(\d+)\]/.exec(paramName)[1];
          obj[key][index] = paramValue;
        } else {
          obj[key].push(paramValue);
        }
      } else {
        if (!obj[paramName]) {
          obj[paramName] = paramValue;
        } else if (obj[paramName] && typeof obj[paramName] === 'string'){
          obj[paramName] = [obj[paramName]];
          obj[paramName].push(paramValue);
        } else {
          obj[paramName].push(paramValue);
        }
      }
    }
  }

  return obj;
}

var params = document.getElementById('params');
var results = document.getElementById('results');
document.querySelector('input').addEventListener('keyup', function() {
  params.innerText = this.value;
  results.innerText = JSON.stringify(getAllUrlParams("http://www.example.de/?" + this.value), null, 2);
});

</script>


</body>

Alles anzeigen

basti1012 · 16. Juli 2020

Wenn ich deinen Code tese bekomme ich andere Ergebnisse als wie du es in deinen ersten Beitrag beschrieben hast.

Schreibe ich http://www.example.com?test=asdf&test2=jklw inder Box bekomme ich

Code

{
  " http://www.example.com": true
}

In ersten Beitrag schreibst du was anderes.

Das alles ohne Box zu erstellen ist eigentlich auch kein problem.

Mach den kram weg

Code

document.querySelector('input').addEventListener('keyup', function() {
  params.innerText = this.value;
  results.innerText = JSON.stringify(getAllUrlParams("http://www.example.de/?" + this.value), null, 2);
});

und erstelle es so

Code

url=window.location.href; 
params.innerText =url;  
results.innerText = JSON.stringify(getAllUrlParams(url), null, 2);

komischerweise stimmen bei mir dann die Ergebnisse mit deinen ersten Post überein

nubba · 16. Juli 2020

Vielen Dank für deine Hilfe, hat mir sehr geholfen.

Warum ich das so umständlich versucht habe verstehe ich aktuell noch nicht.

Herzlichen Dank

JS URL splitten und Parameter beim öffnen direkt ausgeben

Jetzt mitmachen!

Teilen

Tags