🎐 🧑🏼 🔓 Wie analysiere ich eine URL in JavaScript? ⛪️ 🖐🏽 ⏯️

Guten Tag, Freunde!

Ich präsentiere Ihnen die Übersetzung des Artikels "So analysieren Sie URLs in JavaScript: Hostname, Pfadname, Abfrage, Hash" von Dmitri Pavlutin.

Uniform Resource Locator oder kurz URL ist ein Link zu einer Webressource (Webseite, Bild, Datei). Die URL definiert den Speicherort der Ressource und deren Empfang - das Protokoll (http, ftp, mailto).

Hier ist zum Beispiel die URL für diesen Artikel:

https://dmitripavlutin.com/parse-url-javascript

Es ist häufig erforderlich, bestimmte Elemente einer URL abzurufen. Dies kann der Hostname (Hostname dmitripavlutin.com) oder der Pfadname (Pfadname, /parse-url-javascript) sein.

Eine bequeme Möglichkeit, die einzelnen Komponenten einer URL abzurufen, ist der Konstruktor URL().

In diesem Artikel werden wir über die Struktur und die Hauptkomponenten einer URL sprechen.

1. URL-Struktur

Ein Bild sagt mehr als tausend Worte. Im obigen Bild sehen Sie die Hauptkomponenten der URL:

2. URL-Konstruktor ()

Ein Konstruktor URL()ist eine Funktion, mit der Sie URL-Komponenten analysieren (analysieren) können:

const url = new URL(relativeOrAbsolute [, absoluteBase])

Das Argument relativeOrAbsolutekann eine absolute oder relative URL sein. Wenn das erste Argument ein relativer Link ist, ist das zweite Argument absoluteBaseerforderlich und die absolute URL, die die Grundlage für das erste Argument bildet.

Lassen Sie uns zum Beispiel URL()mit einer absoluten URL initialisieren :

const url = new URL('http://example.com/path/index.html')

url.href // 'http://example.com/path/index.html'

Kombinieren wir nun die relativen und absoluten URLs:

const url = new URL('/path/index.html', 'http://example.com')

url.href // 'http://example.com/path/index.html'

Die hrefInstanzeigenschaft URL()gibt die übergebene URL-Zeichenfolge zurück.

Nach dem Erstellen einer Instanz URL()können Sie auf die URL-Komponenten zugreifen. Als Referenz ist hier die Instanzschnittstelle URL():

interface URL {
  href:     USVString;
  protocol: USVString;
  username: USVString;
  password: USVString;
  host:     USVString;
  hostname: USVString;
  port:     USVString;
  pathname: USVString;
  search:   USVString;
  hash:     USVString;

  readonly origin: USVString;
  readonly searchParams: URLSearchParams;

  toJSON(): USVString;
}

Hier USVStringbedeutet type, dass JavaScript eine Zeichenfolge zurückgeben soll.

3. Abfragezeichenfolge

Mit dieser Eigenschaft url.searchkönnen Sie eine URL-Abfragezeichenfolge abrufen, die mit einem Präfix beginnt ?:

const url = new URL(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.search // '?message=hello&who=world'

Wenn keine Abfragezeichenfolge vorhanden ist, wird url.searcheine leere Zeichenfolge ('') zurückgegeben:

const url1 = new URL('http://example.com/path/index.html')
const url2 = new URL('http://example.com/path/index.html?')

url1.search // ''
url2.search // ''

3.1. Analysieren (Parsen) einer Abfragezeichenfolge

Anstatt die ursprüngliche Abfragezeichenfolge abzurufen, können wir deren Parameter abrufen.

Eine einfache Möglichkeit, dies zu tun, bietet die Unterkunft url.searchParams. Der Wert dieser Eigenschaft ist eine Instanz der URLSeachParams-Schnittstelle.

Das Objekt URLSearchParamsbietet viele Methoden zum Arbeiten mit Abfragezeichenfolgenparametern ( get(param), has(param)usw.).

Nehmen wir ein Beispiel:

const url = new Url(
    'http://example.com/path/index.html?message=hello&who=world'
)

url.searchParams.get('message') // 'hello'
url.searchParams.get('missing') // null

url.searchParams.get('message')Gibt den Wert des messageAbfragezeichenfolgenparameters zurück.

Der Zugriff auf einen nicht vorhandenen Parameter gibt url.searchParams.get('missing')zurück null.

4. Hostname (Hostname)

Der Eigenschaftswert url.hostnameist der Hostname der URL:

const url = new URL('http://example.com/path/index.html')

url.hostname // 'example.com'

5. Pfad (Pfadname)

Die Eigenschaft url.pathnameenthält den URL-Pfad:

const url = new URL('http://example.com/path/index.html?param=value')

url.pathname // '/path/index.html'

Wenn die URL keinen Pfad hat, gibt sie url.pathnamedas folgende Zeichen zurück /:

const url = new URL('http://example.com/');

url.pathname; // '/'

6. Hash

Schließlich kann der Hash über eine Eigenschaft erhalten werden url.hash:

const url = new URL('http://example.com/path/index.html#bottom')

url.hash // '#bottom'

Wenn kein Hash vorhanden ist, wird url.hasheine leere Zeichenfolge ('') zurückgegeben:

const url = new URL('http://example.com/path/index.html')

url.hash // ''

7. Überprüfen (Überprüfen) der URL

Durch Aufrufen des Konstruktors wird new URL()nicht nur eine Instanz erstellt, sondern auch die übergebene URL überprüft. Wenn die URL nicht gültig ist, wird sie weggeworfen TypeError.

Zum Beispiel http ://example.comkeine gültige URL, da httpein Leerzeichen dahinter steht .

Versuchen wir, diese URL zu verwenden:

try {
    const url = new URL('http ://example.com')
} catch (error) {
    error // TypeError, "Failed to construct URL: Invalid URL"
}

Da wirft die 'http ://example.com'falsche URL wie erwartet .new URL('http ://example.com')TypeError

8. Arbeiten mit URL

Eigenschaften wie search, hostname, pathname, hashsind beschreibbar.

Zum Beispiel wollen wir den Hostnamen eines vorhandenen URL ändern von red.comzu blue.io:

const url = new URL('http://red.com/path/index.html')

url.href // 'http://red.com/path/index.html'

url.hostname = 'blue.io'

url.href // 'http://blue.io/path/index.html'

Eigenschaften origin, searchParamssind schreibgeschützt.

9. Fazit

Ein Konstruktor URL()ist eine sehr bequeme Möglichkeit, eine URL in JavaScript zu analysieren (zu analysieren) und zu validieren.

new URL(relativeOrAbsolute, [, absoluteBase]Nimmt eine absolute oder relative URL als ersten Parameter. Wenn der erste Parameter eine relative URL ist, muss der zweite Parameter eine absolute URL sein - die Basis für das erste Argument.

Nach der Instanziierung URL()können Sie auf die Hauptkomponenten der URL zugreifen:

url.search - ursprüngliche Abfragezeichenfolge
url.searchParams- Eine Instanz URLSearchParamszum Abrufen von Abfragezeichenfolgenparametern
url.hostname - Hostname
url.pathname - Weg
url.hash - Hashwert

Wie analysiere ich eine URL in JavaScript?