Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. Web-APIs
  3. URLPattern
  4. URLPattern()

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

View in EnglishAlways 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 inWeb Workers verfügbar.

DerURLPattern() Konstruktor gibt ein neuesURLPattern 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

inputOptional

Ein 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:

protocolOptional

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

usernameOptional

Ein Muster, das einen URL-Benutzernamen erfasst.

passwordOptional

Ein Muster, das ein URL-Passwort erfasst.

hostnameOptional

Ein Muster, das einen URL-Hostname erfasst.

portOptional

Ein Muster, das einen URL-Port erfasst.

pathnameOptional

Ein Muster, das einen URL-Pfadnamen erfasst.

searchOptional

Ein Muster, das ein URL-Suche erfasst.

hashOptional

Ein Muster, das ein URL-Hash erfasst.

baseURLOptional

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

urlOptional

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, mussbaseURL ebenfalls angegeben werden.

baseURLOptional

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

optionsOptional

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

ignoreCaseOptional

Ermöglicht die groß-/kleinschreibungsunabhängige Übereinstimmung, wenn auftrue gesetzt.Wenn weggelassen oder auffalse gesetzt, 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

TypeError

Gibt eines der folgenden an:

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

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.

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 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 (""):

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 einerurl oderbaseURL angeben, wird der Port standardmäßig auf den Platzhalterstring (*) gesetzt:

js
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:

js
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.

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 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

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 Benutzernamenmustermyusername: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 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")); // false

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

js
// 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")); // true

Vererbung 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).

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 vonURLPattern ist verfügbarauf GitHub

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

[8]ページ先頭

©2009-2025 Movatter.jp