Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

URLPattern: URLPattern() Konstruktor

Baseline 2025
Newly available

Since ⁨September 2025⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Der URLPattern() Konstruktor gibt ein neues URLPattern Objekt zurück, das die URLs repräsentiert, die mit diesem Muster übereinstimmen werden.

Syntax

js
new URLPattern(input)
new URLPattern(input, options)
new URLPattern(url)
new URLPattern(url, baseURL)
new URLPattern(url, baseURL, options)

Parameter

input Optional

Ein Objekt, das separate Eigenschaften zur Definition der Muster hat, die für jeden Teil einer URL verwendet werden.

Die Objektglieder können beliebig (oder gar nicht) sein:

protocol Optional

Ein Muster, das ein URL-Protokoll wie http, https oder "http{s}?" (um sowohl https als auch http zu matchen) erfasst.

username Optional

Ein Muster, das einen URL-Benutzernamen erfasst.

password Optional

Ein Muster, das ein URL-Passwort erfasst.

hostname Optional

Ein Muster, das einen URL-Hostname erfasst.

port Optional

Ein Muster, das einen URL-Port erfasst.

pathname Optional

Ein Muster, das einen URL-Pfadnamen erfasst.

Ein Muster, das ein URL-Suche erfasst.

hash Optional

Ein Muster, das ein URL-Hash erfasst.

baseURL Optional

Ein String, der eine absolute URL bereitstellt, von der ungenauere Objekt-Eigenschaften geerbt werden können.

url Optional

Ein String, der URL-Muster zur Übereinstimmung darstellt.

Dies ist entweder als absolute oder relative URL formatiert, kann jedoch Markup enthalten, um Übereinstimmungsmuster und Escape-Sequenzen anzugeben. Wenn es als relative URL formatiert ist, muss baseURL ebenfalls angegeben werden.

baseURL Optional

Ein String, der eine absolute URL bereitstellt, von der nicht festgelegte, weniger spezifische URL-Teile geerbt werden können. Dies muss festgelegt werden, wenn url eine relative URL ist und darf nicht festgelegt werden, wenn input verwendet wird (input.baseURL kann verwendet werden, um vererbte Werte für ein input bereitzustellen, ist aber im Gegensatz zu dieser Eigenschaft nie erforderlich).

options Optional

Ein Objekt, das Optionen zur Übereinstimmung des gegebenen Musters bereitstellt. Die zulässigen Objektmitglieder sind:

ignoreCase Optional

Ermöglicht die groß-/kleinschreibungsunabhängige Übereinstimmung, wenn auf true gesetzt. Wenn weggelassen oder auf false gesetzt, erfolgt die Übereinstimmung unter Berücksichtigung der Groß-/Kleinschreibung.

Hinweis: Alle URL-Teile in den input-Eigenschaften und die url sind optional. Wenn sie in diesen Parametern nicht angegeben sind, können einige Werte aus der baseURL geerbt werden, abhängig davon, welche anderen URL-Teile definiert sind. Ausgelassene Teile werden zu Wildcards (*) normalisiert.

Ausnahmen

TypeError

Gibt eines der folgenden an:

  • Das angegebene input, url oder baseURL ist nicht gültig oder syntaktisch korrekt.
  • Die angegebene url ist relativ, aber es wird keine baseURL bereitgestellt, um eine vollständige absolute URL zu bilden.
  • Eine baseURL ist angegeben, und input ist ein absolutes Muster oder ein strukturiertes Objekt.

Beschreibung

Der URLPattern Konstruktor kann entweder ein "input"-Objekt oder einen URL-String und optional eine baseURL annehmen. Beide Formen können auch ein Optionsobjekt als Argument enthalten, das zusätzliche Übereinstimmungsoptionen festlegt, wie etwa die Berücksichtigung der Groß-/Kleinschreibung.

js
new URLPattern(input);
new URLPattern(url, baseURL);

Das im ersten Konstruktionstyp verwendete Eingabeobjekt beschreibt die URLs, die durch die Angabe von Mustern für einzelne URL-Teile übereinstimmen sollen: protocol, username, password, hostname, port, pathname, search, hash und baseURL. Wenn die baseURL-Eigenschaft angegeben wird, wird sie als URL analysiert und kann verwendet werden, um andere Eigenschaften zu ergänzen, die fehlen (siehe den folgenden Abschnitt Inheritance from a base URL). Eigenschaften, die ausgelassen oder nicht durch die baseURL-Eigenschaft ergänzt werden, standardisieren auf den Platzhalterstring (*), der gegen jeden entsprechenden Wert in einer URL übereinstimmt.

Der zweite Konstruktionstyp nimmt einen URL-String, der Muster eingebettet in ihm enthalten kann. Der String kann eine absolute oder relative URL angeben — wenn das Muster relativ ist, muss baseURL als zweites Argument angegeben werden. Beachten Sie, dass es erforderlich sein kann, einige Zeichen zu escapen im URL-String, wenn unklar ist, ob das Zeichen verschiedene URL-Komponenten trennt oder Teil eines Musters ist.

Vererbung von einer Basis-URL

URL-Teile, die spezifischer als der am wenigsten spezifische Teil in der url definiert sind, können von baseURL (oder von input.baseURL für input) geerbt werden. Intuitiv bedeutet dies, dass, wenn der pathname-Teil im Eingabewert angegeben ist, die Teile zur linken Seite in einer URL von der Basis-URL (protocol, hostname und port) geerbt werden können, während die Teile zur rechten Seite (search und hash) nicht geerbt werden können. Der username und das password werden nie von der Basis-URL geerbt.

Für weitere Informationen siehe Inheritance from a BaseURL im API-Überblick.

Hostname in url oder baseURL beeinflusst den Standardport

Im Gegensatz zu anderen URL-Teilen kann der Port implizit gesetzt werden, wenn Sie eine url oder Basis-URL (entweder im baseURL-Parameter oder im Objekt) angeben und keinen Port explizit angeben. In diesem Fall wird der Port auf den leeren String ("") gesetzt und entspricht dem Standardport (443).

Zum Beispiel setzen diese Muster alle den Port auf den leeren String (""):

js
new URLPattern("https://example.com");
new URLPattern("https://example.com*");
new URLPattern("https://example.com/foo");
new URLPattern({
  pathname: "/foo/*",
  baseURL: "https://example.com",
});

Wenn Sie keinen Hostnamen in einer url oder baseURL angeben, wird der Port standardmäßig auf den Platzhalterstring (*) gesetzt:

js
new URLPattern({ pathname: "/foo/*" }); // Port omitted, defaults to '*'

Escaping spezieller Zeichen

Die Mustersyntax enthält eine Reihe von Zeichen, die natürlich in URLs vorkommen können, wie z.B.:

  • ? gibt sowohl ein optionales Zeichen oder eine Gruppe in einem Muster an und der Suchteil einer URL.
  • : kennzeichnet den Beginn einer benannten Gruppe in einem Muster und einen Trenner für Benutzername und Passwort oder einen Hostnamen und einen Port.

Wenn Sie einen URLPattern mit dem url Stringparameter konstruieren, werden diese speziellen Zeichen (bei jeglicher Unklarheit) als Teil der Mustersyntax angenommen. Wenn Sie die Zeichen verwenden, um Teile der URL darzustellen, müssen Sie sie escapen, indem sie ihnen \\ voranstellen (oder das Problem vermeiden, indem Sie URLPattern mit der Objektsyntax konstruieren).

Zum Beispiel entkommt das folgende Muster dem ?-Zeichen, was dieses Muster dazu bringt, einen search URL-Teil von "fred" zu erfassen:

js
console.log(new URLPattern("https://example.com/*\\?fred"));

Ebenso zeigt das unten stehende Match the username and password Beispiel einen Fall, in dem der : Trenner escaped werden muss.

Beispiele

Standardmuster

Dieser Code zeigt, dass URL-Teile, die in einer URL oder von einer Basis-URL geerbt werden, nicht angegeben sind, standardmäßig den Platzhalterwert verwenden.

js
console.log(new URLPattern());
console.log(new URLPattern({}));
/*
{
  protocol: "*",
  username: "*",
  password: "*",
  hostname: "*",
  port: "*",
  pathname: "*",
  search: "*",
  hash: "*",
  hasRegExpGroups: false,
};
*/

Ein pathname abgleichen

js
let pattern1 = new URLPattern("https://example.com/books/:id");

// same as
let pattern2 = new URLPattern("/books/:id", "https://example.com");

// or
let pattern3 = new URLPattern({
  protocol: "https",
  hostname: "example.com",
  pathname: "/books/:id",
});

// or
let pattern4 = new URLPattern({
  pathname: "/books/:id",
  baseURL: "https://example.com",
});

// or
let pattern5 = new URLPattern({
  pathname: "/books/:id",
  baseURL: "https://example.com/some/path/?search=3#param=1",
  // More-specific URL parts are discarded
});

Das Protokoll und den Hostnamen abgleichen

js
let pattern = new URLPattern({
  protocol: "http{s}?",
  hostname: ":subdomain.example.com",
});

Den Benutzernamen und das Passwort abgleichen

Dies setzt die Benutzername- und Passwort-URL-Teile mit dem Musterstring. Beachten Sie, wie der : Trenner escaped werden muss, wenn der Musterstring verwendet wird. Ohne dieses wäre das Benutzernamenmuster myusername:mypassword.

js
const pattern = new URLPattern(
  "https://myusername\\:mypassword@example.com/some/path",
);

console.log(pattern.username); // "myusername"
console.log(pattern.password); // "mypassword"

Aus diesem Grund ist es oft natürlicher (und sicherer), die Objektsyntax zu verwenden.

Alle möglichen strukturierten Teile abgleichen

js
let pattern = new URLPattern({
  protocol: "http{s}?",
  username: ":username",
  password: ":password",
  hostname: ":subdomain.example.com",
  port: ":port(80|443)",
  pathname: "/:path",
  search: "*",
  hash: "*",
});

Groß-/Kleinschreibung ignorierende Übereinstimmung

js
// Case-sensitive matching by default
const pattern = new URLPattern("https://example.com/2022/feb/*");
console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // true
console.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // false

Das Setzen der ignoreCase-Option auf true im Konstruktor schaltet alle Übereinstimmungsoperationen auf Groß-/Kleinschreibung ignorierend für das gegebene Muster:

js
// Case-insensitive matching
const pattern = new URLPattern("https://example.com/2022/feb/*", {
  ignoreCase: true,
});
console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // true
console.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // true

Vererbung von der Basis-URL

Dies bietet ein reales Beispiel der Vererbung. Das pathname ist explizit angegeben. Die Werte, die weniger spezifisch als das pathname sind, wie das Protokoll und der Hostname, werden geerbt. Die spezifischeren Werte werden ignoriert und setzen auf ihre Standardwerte (wie "*" für die Suche und das Hash, und "" für den Port).

js
const pattern = new URLPattern({
  pathname: "/some/path",
  baseURL: "https://myuser:mypass@example.com/mypath?search=1&p=3#fred",
});

console.log(pattern);
// protocol: https
// username: *
// password: *
// hostname: example.com
// port:
// pathname: /some/path
// search: *
// hash: *

Spezifikationen

Specification
URL Pattern
# dom-urlpattern-urlpattern

Browser-Kompatibilität

Siehe auch

  • Ein Polyfill von URLPattern ist verfügbar auf GitHub