Analysieren Sie eine URL in JavaScript


76

Wie analysiere ich eine URL mit JavaScript (auch mit jQuery)?

Zum Beispiel habe ich das in meiner Zeichenfolge,

url = "http://example.com/form_image_edit.php?img_id=33"

Ich möchte den Wert von bekommen img_id

Ich weiß, dass ich dies mit PHP problemlos tun kann parse_url(), aber ich möchte wissen, wie dies mit JavaScript möglich ist.


4
Mit PHP müssen Sie nicht die Funktion parse_url () verwenden, um die img_id zu erhalten. Verwenden Sie einfach $ _GET ['img_id]
mdaguerre


2
Die richtige Antwort unten ist total lächerlich, wenn Sie nur brauchen window.location.search.split('=')[1]. Ich kann nicht glauben, dass er dafür 75 Stimmen bekommen hat !!
Adam Spence

3
@AdamSpence window.location funktioniert nur für die Seiten-URL, nicht für eine beliebige URL-Zeichenfolge.
Fraser Harris

Antworten:


121

Sie können einen Trick verwenden, um ein a-element zu erstellen , die URL hinzuzufügen und dann das Location-Objekt zu verwenden .

function parseUrl( url ) {
    var a = document.createElement('a');
    a.href = url;
    return a;
}

parseUrl('http://example.com/form_image_edit.php?img_id=33').search

Welches wird ausgegeben: ?img_id=33


Sie können auch php.js verwenden , um die Funktion parse_url in JavaScript abzurufen .


Update (05.07.2012)

Ich würde empfehlen, die ausgezeichnete URI.js- Bibliothek zu verwenden, wenn Sie mehr als nur eine supereinfache URL-Behandlung benötigen.


4
Das entspricht url.match(/\?.+/)[0], was etwas kürzer und wahrscheinlich viel schneller ist.
RobG

9
Wow, ich wusste nie über diesen Trick Bescheid, es machte meinen Tag nach dem Durchsuchen aller hässlichsten regulären Ausdrücke der Welt =)
Greg Guida

2
@Christophe Nein, es zeigt Ihnen, welche Eigenschaften verfügbar sind. Wenn Sie der href-Eigenschaft eines Ankerelements eine URL zuweisen, werden alle Eigenschaften des Location-Objekts abgerufen.
Sindre Sorhus

1
@ IndreSorhus Erstaunlich! Könnten Sie eine Referenz teilen, die dies erklärt und die Browserunterstützung detailliert beschreibt? Gilt dies auch für Elemente mit einem src-Attribut (Link, Iframe)?
Christophe

1
window.location.search
Adam Spence

36

Wenn Ihre Zeichenfolge aufgerufen wird, sdann

var id = s.match(/img_id=([^&]+)/)[1]

werde es dir geben.


10

Versuche dies:

var url = window.location;
var urlAux = url.split('=');
var img_id = urlAux[1]

Wie kann ich bei Verwendung dieser Methode feststellen, in wie viele davon bitte aufgeteilt wurden?
Tim Marshall


6

Einzeiler:

location.search.replace('?','').split('&').reduce(function(s,c){var t=c.split('=');s[t[0]]=t[1];return s;},{})

5
Nun, in JS ist alles ein Einzeiler: P
Realitätsverlust

5

Habe es von Google bekommen, versuche diese Methode zu verwenden

function getQuerystring2(key, default_) 
{ 
    if (default_==null) 
    { 
        default_=""; 
    } 
    var search = unescape(location.search); 
    if (search == "") 
    { 
        return default_; 
    } 
    search = search.substr(1); 
    var params = search.split("&"); 
    for (var i = 0; i < params.length; i++) 
    { 
        var pairs = params[i].split("="); 
        if(pairs[0] == key) 
        { 
            return pairs[1]; 
        } 
    } 


return default_; 
}

2
Dies schlägt fehl, wenn der Wert eines Abfrageparameters '% 3D' ('=') oder '% 26' ('&') enthält. Verwenden Sie dies zur Behebung in der for-Schleife: `` `` if (pairs.shift () == key) {return pairs.join ('='); } `` `` und mache das Unescape nach dem Teilen auf '&'.
michielbdejong

3

Dies sollte einige Randfälle in Kobes Antwort beheben:

function getQueryParam(url, key) {
  var queryStartPos = url.indexOf('?');
  if (queryStartPos === -1) {
    return;
  }
  var params = url.substring(queryStartPos + 1).split('&');
  for (var i = 0; i < params.length; i++) {
    var pairs = params[i].split('=');
    if (decodeURIComponent(pairs.shift()) == key) {
      return decodeURIComponent(pairs.join('='));
    }
  }
}

getQueryParam('http://example.com/form_image_edit.php?img_id=33', 'img_id');
// outputs "33"

2

Ich habe eine Javascript-URL- Analysebibliothek , URL.js , geschrieben. Sie können sie dafür verwenden.

Beispiel:

url.parse("http://mysite.com/form_image_edit.php?img_id=33").get.img_id === "33"

Nein, ich habe noch nie von purl.js gehört.
Kevin Cox

Die Antwort direkt über Ihrer. Ihr Code ist 28-mal schneller und viel sauberer als purl, aber ich kann ihn im aktuellen Zustand nicht verwenden. Ich habe ein Problem auf Github erstellt, das Sie sich ansehen können. Vielen Dank
Steven Vachon

2
Sie vergessen nur, den Build-Schritt auszuführen. Die neue Version erfordert jedoch keinen Build-Schritt mehr, sodass Sie sich jetzt keine Sorgen mehr machen müssen: D
Kevin Cox

2

So etwas sollte für Sie funktionieren. Selbst wenn mehrere Werte für Abfragezeichenfolgen vorhanden sind, sollte diese Funktion den Wert Ihres gewünschten Schlüssels zurückgeben.

function getQSValue(url) 
{
    key = 'img_id';
    query_string = url.split('?');
    string_values = query_string[1].split('&');
    for(i=0;  i < string_values.length; i++)
    {
        if( string_values[i].match(key))
            req_value = string_values[i].split('=');    
    }
    return req_value[1];
}


1
function parse_url(str, component) {
  //       discuss at: http://phpjs.org/functions/parse_url/
  //      original by: Steven Levithan (http://blog.stevenlevithan.com)
  // reimplemented by: Brett Zamir (http://brett-zamir.me)
  //         input by: Lorenzo Pisani
  //         input by: Tony
  //      improved by: Brett Zamir (http://brett-zamir.me)
  //             note: original by http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
  //             note: blog post at http://blog.stevenlevithan.com/archives/parseuri
  //             note: demo at http://stevenlevithan.com/demo/parseuri/js/assets/parseuri.js
  //             note: Does not replace invalid characters with '_' as in PHP, nor does it return false with
  //             note: a seriously malformed URL.
  //             note: Besides function name, is essentially the same as parseUri as well as our allowing
  //             note: an extra slash after the scheme/protocol (to allow file:/// as in PHP)
  //        example 1: parse_url('http://username:password@hostname/path?arg=value#anchor');
  //        returns 1: {scheme: 'http', host: 'hostname', user: 'username', pass: 'password', path: '/path', query: 'arg=value', fragment: 'anchor'}

  var query, key = ['source', 'scheme', 'authority', 'userInfo', 'user', 'pass', 'host', 'port',
      'relative', 'path', 'directory', 'file', 'query', 'fragment'
    ],
    ini = (this.php_js && this.php_js.ini) || {},
    mode = (ini['phpjs.parse_url.mode'] &&
      ini['phpjs.parse_url.mode'].local_value) || 'php',
    parser = {
      php: /^(?:([^:\/?#]+):)?(?:\/\/()(?:(?:()(?:([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?()(?:(()(?:(?:[^?#\/]*\/)*)()(?:[^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
      strict: /^(?:([^:\/?#]+):)?(?:\/\/((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?))?((((?:[^?#\/]*\/)*)([^?#]*))(?:\?([^#]*))?(?:#(.*))?)/,
      loose: /^(?:(?![^:@]+:[^:@\/]*@)([^:\/?#.]+):)?(?:\/\/\/?)?((?:(([^:@]*):?([^:@]*))?@)?([^:\/?#]*)(?::(\d*))?)(((\/(?:[^?#](?![^?#\/]*\.[^?#\/.]+(?:[?#]|$)))*\/?)?([^?#\/]*))(?:\?([^#]*))?(?:#(.*))?)/ // Added one optional slash to post-scheme to catch file:/// (should restrict this)
    };

  var m = parser[mode].exec(str),
    uri = {},
    i = 14;
  while (i--) {
    if (m[i]) {
      uri[key[i]] = m[i];
    }
  }

  if (component) {
    return uri[component.replace('PHP_URL_', '')
      .toLowerCase()];
  }
  if (mode !== 'php') {
    var name = (ini['phpjs.parse_url.queryKey'] &&
      ini['phpjs.parse_url.queryKey'].local_value) || 'queryKey';
    parser = /(?:^|&)([^&=]*)=?([^&]*)/g;
    uri[name] = {};
    query = uri[key[12]] || '';
    query.replace(parser, function($0, $1, $2) {
      if ($1) {
        uri[name][$1] = $2;
      }
    });
  }
  delete uri.source;
  return uri;
}

Referenz


1
var url = window.location;
var urlAux = url.split('=');
var img_id = urlAux[1]

Hat für mich gearbeitet. Die erste Variable sollte jedoch var url = window.location.href sein


0

Web Worker stellen eine Utils- URL für die URL-Analyse bereit .

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.