Arbeiten mit URLs in JavaScript

Geschrieben von Joe Attardi✏️

URLs sind ein wichtiger Bestandteil jeder Web-App. Wenn Ihre App Anfragen an eine API stellt, ist es wichtig, die richtigen URLs für diese Anfragen zu erstellen. Die URL-API, die in allen modernen Browsern unterstützt wird, bietet eine Möglichkeit, URLs zu analysieren und zu bearbeiten. Es bietet einfachen Zugriff auf die verschiedenen Teile der URL.

Die Teile einer URL verstehen

Bedenken Sie die folgende URL:

https://example.com/api/search?query=foo&sort=asc#results

Diese URL besteht aus den folgenden Komponenten:

• Protokoll: https
• Host: example.com
• Pfadname: /api/search
• Abfragezeichenfolge: ?query=foo&sort=asc
• Hash: #results

Mit modernem JavaScript können wir URLs analysieren und diese verschiedenen Teile nach Bedarf extrahieren.

Parsen von URLs

In älteren Browsern, bevor die URL-API verfügbar war, bestand eine Möglichkeit für Entwickler, URLs zu analysieren, in der Verwendung eines Element. Dieses Element bietet einige grundlegende URL-Analysen. So können Sie beispielsweise die Abfragezeichenfolge aus einer URL extrahieren:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Dieser Ansatz hat jedoch einige Nachteile:

• Es erfordert eine DOM-Umgebung, was bedeutet, dass es in einer Umgebung wie Node.js nicht funktionieren würde
• Es gibt auch keine Fehlerbehandlung – wenn eine ungültige URL an das href-Attribut übergeben wird, wird kein Fehler ausgegeben

Sie könnten auch einen regulären Ausdruck verwenden, um die verschiedenen Teile der URL zu analysieren, aber das ist mühsam und fehleranfällig.

Die Verwendung der URL-API zum Parsen von URLs ist unkompliziert. Übergeben Sie einfach die URL, die Sie analysieren möchten, an den URL-Konstruktor. Wenn die URL-Zeichenfolge gültig ist, erhalten Sie ein URL-Objekt mit Eigenschaften für verschiedene Teile der URL zurück:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Analysieren der Abfragezeichenfolge

Sie können auf zwei Arten auf die Abfragezeichenfolge einer URL zugreifen:

• Die Sucheigenschaft, bei der es sich um eine Zeichenfolge handelt, die die vollständige Abfragezeichenfolge (einschließlich des ?-Zeichens) enthält
• Die searchParams-Eigenschaft, die ein URLSearchParams-Objekt ist

Wenn Sie sich für den Wert eines bestimmten Parameters in der Abfragezeichenfolge interessieren, können Sie dessen get-Methode verwenden, um den Parameter anhand seines Namens abzurufen:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Wenn es mehrere Parameter mit demselben Namen gibt, können Sie getAll verwenden, um ein Array mit allen Werten für diesen Namen abzurufen:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Erstellen von Abfragezeichenfolgen

Das manuelle Erstellen einer Abfragezeichenfolge kann schwierig sein, insbesondere wenn Abfrageparameter Sonderzeichen enthalten, die maskiert werden müssen. Wenn ein Abfrageparameter beispielsweise ein &-Zeichen enthalten muss, müssen Sie es als & kodieren. Um diese Situationen abzudecken, müssen Sie die Funktion encodeURIComponent verwenden:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Sie können die Abfragezeichenfolge sicherer erstellen, indem Sie das URLSearchParams-Objekt verwenden:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Zu den Vorteilen der Verwendung von URLSearchParams gehören:

• Sie müssen sich keine Gedanken über die &-Zeichen machen, die die Parameter trennen
• Sie müssen die Parameterwerte nicht URI-kodieren
• Sie müssen keine Zeichenfolgenverkettung verwenden

Iterieren über Abfrageparameter

Ohne ein URLSearchParams-Objekt ist es etwas schwierig, die Parameter in einer Abfragezeichenfolge zu durchlaufen. Sie müssten Zeichenfolgen mehrmals aufteilen – zuerst in Gruppen von Schlüssel/Wert-Paaren, dann noch einmal, um Schlüssel und Wert aufzuteilen:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Wenn die Parameter kodierte Zeichen enthalten könnten, müssten Sie diese auch dekodieren:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Stattdessen können Sie die Einträge-Methode von URLSearchParams verwenden, um die Schlüssel/Wert-Paare zu durchlaufen:

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

Erstellen einer vollständigen URL

Hier ist ein vollständiges Beispiel für die Erstellung einer URL mit einer Basis-URL und einigen Abfrageparametern:

const params = new URLSearchParams();
params.append('foo', 'bar');
params.append('baz', 'qux');
params.append('tag', 'one&two');
console.log(params.toString()); // foo=bar&baz=qux&tag=one%26two

Auf gültige URLs prüfen

Sie könnten versuchen, einen regulären Ausdruck zur Validierung einer URL zu verwenden, aber es ist bekanntermaßen schwierig, einen regulären Ausdruck zu erstellen, der eine gültige URL-Zeichenfolge vollständig erfasst.

Stattdessen können Sie zur URL-API greifen. Der URL-Konstruktor gibt einen Fehler aus, wenn Sie ihm eine ungültige URL geben. Damit können Sie prüfen, ob eine URL gültig ist:

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${value}`);
  });
}

Mit neueren Browsern ist dies noch einfacher. Es gibt eine neuere statische Methode URL.canParse, die eine ähnliche Validierung mit einer einzigen Codezeile durchführt. Wie die Funktion isValidURL oben nimmt sie eine potenzielle URL-Zeichenfolge und gibt abhängig von der Gültigkeit der URL-Zeichenfolge „true“ oder „false“ zurück.

Relative URLs erstellen

Die URL-API verfügt über einen leistungsstarken Mechanismus zum Auflösen relativer URLs. Normalerweise gibt das Argument des URL-Konstruktors einen Fehler aus, wenn es sich nicht um eine vollständige, gültige URL handelt. Sie können jedoch ein zweites Argument angeben, das als Grundlage für die Erstellung einer relativen URL dient. Wenn Sie den Zwei-Argument-Ansatz verwenden, muss das erste Argument keine gültige URL sein, das zweite jedoch schon.

Schauen wir uns zunächst einen einfachen Fall an:

function listQueryParams(queryString) {
  queryString.split('&').forEach(param => {
    const [key, value] = param.split('=');
    console.log(`${key}: ${decodeURIComponent(value)}`);
  });
}

Der URL-Konstruktor nimmt die Basis-URL von https://example.com und fügt den relativen Pfad /about hinzu, was zu https://example.com/about führt.

Was ist mit diesem hier:

function listQueryParams(queryString) {
  const params = new URLSearchParams(queryString);
  params.entries().forEach(([key, value]) => console.log(`${key}: ${value}`));
}

Sie könnten erwarten, dass dies https://example.com/users/profile ist, aber tatsächlich lautet es https://example.com/profile. Dies verhält sich genau wie ein relativer Link; Es nimmt das übergeordnete Pfadsegment, das den Stamm von example.com darstellt, und fügt dann das Profil hinzu.

Sehen wir uns ein weiteres Beispiel für die Verwendung einer relativen URL an. Sie können auch .. verwenden, um in der Pfadhierarchie zurück nach oben zu gehen:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Dieses erscheint auf https://example.com/profile. Denken Sie daran, dass relative URLs beim übergeordneten Pfadsegment beginnen. Dann hat dieser .. darin, was ein weiteres Pfadsegment nach oben führt.

Wenn Sie den URL-Konstruktor mit einer relativen URL aufrufen und eine ungültige oder unvollständige URL für die Basis-URL angeben, erhalten Sie eine Fehlermeldung. Sie erhalten auch eine Fehlermeldung, wenn Sie eine relative URL ohne vollständige Basis-URL verwenden:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

Arbeiten mit dem window.location-Objekt

Vielleicht kennen Sie das window.location-Objekt, das die URL der aktuellen Seite darstellt. Dieses Objekt verfügt auch über Eigenschaften wie href und pathname, sodass Sie vielleicht denken, es handele sich um ein URL-Objekt. Dies ist ein anderes Objekt, ein Standort, der einige Eigenschaften mit der URL gemeinsam hat, ihm aber auch einige fehlen (z. B. die Eigenschaft searchParams).

Auch wenn es sich nicht um ein URL-Objekt handelt, können Sie window.location dennoch verwenden, um neue URL-Objekte zu erstellen. Sie können window.location an den URL-Konstruktor übergeben, um basierend auf der aktuellen URL eine neue vollständige URL mit searchParams und allem zu erstellen, oder Sie können sie sogar als Basis-URL beim Erstellen relativer URLs verwenden:

const url = new URL('https://example.com/api/search?query=foobar&maxResults=10');
console.log(url.searchParams.get('query'); // foobar
console.log(url.searchParams.get('maxResults'); // 10

Abgleich von Mustern innerhalb einer URL mithilfe von URLPattern

Die Verwendung einer URL erleichtert das Abrufen des Pfads von einer URL. In der URL https://example.com/api/users/123/profile lautet der Pfadname beispielsweise /api/users/123/profile. Was wäre, wenn wir von dieser URL nur die Benutzer-ID 123 erhalten wollten?

Wie bereits erwähnt, kann es schwierig sein, geeignete reguläre Ausdrücke zu erstellen, um Teile einer URL zu validieren und zu extrahieren.

Es ist noch nicht in allen Browsern verfügbar, aber Sie können die URLPattern-API verwenden, um Teile der URL abzugleichen und zu extrahieren und dabei die von Ihnen angegebenen Muster abzugleichen. Dies kann besonders nützlich sein für Dinge wie clientseitiges Routing in einer Single-Page-Anwendung (SPA).

Am Beispiel der Benutzerprofil-URL erstellen wir ein URL-Muster, um die Benutzer-ID zu erhalten. Wir können ein führendes :-Zeichen verwenden, um einen benannten Platzhalter zu kennzeichnen, der später verwendet werden kann, um diesen Teil der URL abzugleichen:

const url = new URL('https://example.com/api/search?tag=tag1&tag=tag2&tag=tag3');
console.log(url.searchParams.getAll('tag')); // ['tag1', 'tag2', 'tag3']

Wenn Sie exec für ein URLPattern aufrufen, benötigt es eine gültige URL. Es gibt ein Matcher-Objekt zurück, das Eigenschaften für jeden Teil der URL (Protokoll, Host, Pfadname usw.) enthält. Jede dieser Eigenschaften verfügt auch über eine Gruppeneigenschaft, die Platzhalternamen wie :userId ihren Werten innerhalb der URL zuordnet.

Wenn es Ihnen nur darum geht, einen Teil der URL abzugleichen, beispielsweise den Pfadnamen, wie wir es hier getan haben, können Sie auch Platzhalter im URL-Muster angeben. Anstelle einer URL-Zeichenfolge können Sie auch ein Objekt übergeben, das die Teile der URL enthält, die Sie abgleichen möchten:

let queryString = 'foo=bar';
queryString += '&baz=qux';
queryString += '&tag=' + encodeURIComponent('one&two');
console.log(queryString); // foo=bar&baz=qux&tag=one%26two

Die URLPattern-API ist immer noch nicht in allen Browsern verfügbar. Zum Zeitpunkt des Schreibens wird es in Firefox oder Safari noch nicht unterstützt. Die neuesten Informationen zur Browserunterstützung finden Sie unter CanIUse.com.

Zusammenfassung

Die URL-API ist eine vielseitige Schnittstelle zum Erstellen, Validieren und Bearbeiten von URLs in JavaScript. Die Verwendung ist sicherer und weniger fehleranfällig als manuelles Parsen oder reguläre Ausdrücke. Durch die Verwendung eines URLSearchParams-Objekts können Sie eine Abfragezeichenfolge erstellen, ohne sich Gedanken über die Verkettung von Zeichenfolgen oder die Kodierung von Sonderzeichen machen zu müssen.

Die URLPattern-API geht noch einen Schritt weiter und unterstützt Platzhalter und benannte Platzhalter, sodass Sie URLs segmentieren und würfeln können, um die Anforderungen Ihrer App zu erfüllen! Weiterführende Literatur:

• Die URL-Schnittstelle (MDN)
• Die URLPattern API (MDN)

---

Richten Sie sich in wenigen Minuten mit der modernen Fehlerverfolgung von LogRocket ein:

1. Besuchen Sie https://logrocket.com/signup/, um eine App-ID zu erhalten.
2. Installieren Sie LogRocket über NPM oder Skript-Tag. LogRocket.init() muss clientseitig und nicht serverseitig aufgerufen werden.

NPM:

function getQueryString(url) {
  const link = document.createElement('a');
  link.href = url;
  return url.search;
}

Skript-Tag:

const url = new URL('https://example.com/api/search?query=foobar');
console.log(url.host); // example.com
console.log(url.pathname); // /api/search
console.log(url.search); // ?query=foobar

3. (Optional) Installieren Sie Plugins für tiefere Integrationen mit Ihrem Stack:

• Redux-Middleware
• Ngrx-Middleware
• Vuex-Plugin

Jetzt loslegen

Das obige ist der detaillierte Inhalt vonArbeiten mit URLs in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!