Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
URLPattern: URLPattern() Konstruktor
Baseline 2025Newly 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 inWeb Workers verfügbar.
DerURLPattern() Konstruktor gibt ein neuesURLPattern Objekt zurück, das die URLs repräsentiert, die mit diesem Muster übereinstimmen werden.
In diesem Artikel
Syntax
new URLPattern(input)new URLPattern(input, options)new URLPattern(url)new URLPattern(url, baseURL)new URLPattern(url, baseURL, options)Parameter
inputOptionalEin Objekt, das separate Eigenschaften zur Definition derMuster hat, die für jeden Teil einer URL verwendet werden.
Die Objektglieder können beliebig (oder gar nicht) sein:
protocolOptionalEin Muster, das ein URL-Protokoll wie
http,httpsoder"http{s}?"(um sowohl https als auch http zu matchen) erfasst.usernameOptionalEin Muster, das einen URL-Benutzernamen erfasst.
passwordOptionalEin Muster, das ein URL-Passwort erfasst.
hostnameOptionalEin Muster, das einen URL-Hostname erfasst.
portOptionalEin Muster, das einen URL-Port erfasst.
pathnameOptionalEin Muster, das einen URL-Pfadnamen erfasst.
searchOptionalEin Muster, das ein URL-Suche erfasst.
hashOptionalEin Muster, das ein URL-Hash erfasst.
baseURLOptionalEin String, der eine absolute URL bereitstellt, von derungenauere Objekt-Eigenschaften geerbt werden können.
urlOptionalEin 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
baseURLebenfalls angegeben werden.baseURLOptionalEin String, der eine absolute URL bereitstellt, von dernicht festgelegte, weniger spezifische URL-Teile geerbt werden können.Dies muss festgelegt werden, wenn
urleine relative URL ist und darf nicht festgelegt werden, wenninputverwendet wird (input.baseURLkann verwendet werden, um vererbte Werte für eininputbereitzustellen, ist aber im Gegensatz zu dieser Eigenschaft nie erforderlich).optionsOptionalEin Objekt, das Optionen zur Übereinstimmung des gegebenen Musters bereitstellt.Die zulässigen Objektmitglieder sind:
ignoreCaseOptionalErmöglicht die groß-/kleinschreibungsunabhängige Übereinstimmung, wenn auf
truegesetzt.Wenn weggelassen oder auffalsegesetzt, erfolgt die Übereinstimmung unter Berücksichtigung der Groß-/Kleinschreibung.
Hinweis:Alle URL-Teile in deninput-Eigenschaften und dieurl sind optional.Wenn sie in diesen Parametern nicht angegeben sind, können einige Werte aus derbaseURLgeerbt werden, abhängig davon, welche anderen URL-Teile definiert sind.Ausgelassene Teile werden zu Wildcards (*) normalisiert.
Ausnahmen
TypeErrorGibt eines der folgenden an:
- Das angegebene
input,urloderbaseURList nicht gültig oder syntaktisch korrekt. - Die angegebene
urlist relativ, aber es wird keinebaseURLbereitgestellt, um eine vollständige absolute URL zu bilden. - Eine
baseURList angegeben, und input ist ein absolutes Muster oder ein strukturiertes Objekt.
- Das angegebene
Beschreibung
DerURLPattern Konstruktor kann entweder ein "input"-Objekt oder einen URL-String und optional einebaseURL annehmen.Beide Formen können auch ein Optionsobjekt als Argument enthalten, das zusätzliche Übereinstimmungsoptionen festlegt, wie etwa die Berücksichtigung der Groß-/Kleinschreibung.
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 undbaseURL.Wenn diebaseURL-Eigenschaft angegeben wird, wird sie als URL analysiert und kann verwendet werden, um andere Eigenschaften zu ergänzen, die fehlen (siehe den folgenden AbschnittInheritance from a base URL).Eigenschaften, die ausgelassen oder nicht durch diebaseURL-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, mussbaseURL 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 derurl definiert sind,können vonbaseURL (oder voninput.baseURL fürinput) geerbt werden.Intuitiv bedeutet dies, dass, wenn derpathname-Teil im Eingabewert angegeben ist, die Teile zur linken Seite in einer URL von der Basis-URL (protocol,hostname undport) geerbt werden können, während die Teile zur rechten Seite (search undhash) nicht geerbt werden können.Derusername und daspassword werden nie von der Basis-URL geerbt.
Für weitere Informationen sieheInheritance from a BaseURL im API-Überblick.
Hostname inurl oderbaseURL beeinflusst den Standardport
Im Gegensatz zu anderen URL-Teilen kann der Port implizit gesetzt werden, wenn Sie eineurl oder Basis-URL (entweder imbaseURL-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 (""):
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 einerurl oderbaseURL angeben, wird der Port standardmäßig auf den Platzhalterstring (*) gesetzt:
new URLPattern({ pathname: "/foo/*" }); // Port omitted, defaults to '*'Escaping spezieller Zeichen
DieMustersyntax 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 einenURLPattern mit demurl 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 SieURLPattern 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:
console.log(new URLPattern("https://example.com/*\\?fred"));Ebenso zeigt das unten stehendeMatch 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 odervon einer Basis-URL geerbt werden, nicht angegeben sind, standardmäßig den Platzhalterwert verwenden.
console.log(new URLPattern());console.log(new URLPattern({}));/*{ protocol: "*", username: "*", password: "*", hostname: "*", port: "*", pathname: "*", search: "*", hash: "*", hasRegExpGroups: false,};*/Ein pathname abgleichen
let pattern1 = new URLPattern("https://example.com/books/:id");// same aslet pattern2 = new URLPattern("/books/:id", "https://example.com");// orlet pattern3 = new URLPattern({ protocol: "https", hostname: "example.com", pathname: "/books/:id",});// orlet pattern4 = new URLPattern({ pathname: "/books/:id", baseURL: "https://example.com",});// orlet 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
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 Benutzernamenmustermyusername:mypassword.
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
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
// Case-sensitive matching by defaultconst pattern = new URLPattern("https://example.com/2022/feb/*");console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // trueconsole.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // falseDas Setzen derignoreCase-Option auftrue im Konstruktor schaltet alle Übereinstimmungsoperationen auf Groß-/Kleinschreibung ignorierend für das gegebene Muster:
// Case-insensitive matchingconst pattern = new URLPattern("https://example.com/2022/feb/*", { ignoreCase: true,});console.log(pattern.test("https://example.com/2022/feb/xc44rsz")); // trueconsole.log(pattern.test("https://example.com/2022/Feb/xc44rsz")); // trueVererbung von der Basis-URL
Dies bietet ein reales Beispiel der Vererbung.Daspathname 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).
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
URLPatternist verfügbarauf GitHub