urlpattern polyfill
1.0.0
URLPATTER ist eine neue Web -API für passende URLs. Es soll sowohl eine bequeme API für Webentwickler bereitstellen als auch in anderen Web -APIs verwendet werden, die URLs entsprechen müssen. zB Servicearbeiter. Der Erklärung diskutiert die motivierenden Anwendungsfälle.
Dies ist eine Polyfill für die URLpattern -API, damit die Funktion in Browsern verfügbar ist, die sie nicht nativ unterstützen. Diese Polyfill führt die gleiche Webplattform -Testsuite über.
Das Polyfill arbeitet in Browsern (ESM -Modul) und in Node.js entweder über import (ESM -Modul) oder über das Request (CJS -Modul).
Die Polyfill wird nur geladen, wenn die Urlmulde noch nicht im globalen Objekt vorhanden ist, und in diesem Fall fügt sie es dem globalen Objekt hinzu.
// Conditional ESM module loading (Node.js and browser)
// @ts-ignore: Property 'UrlPattern' does not exist
if ( ! globalThis . URLPattern ) {
await import ( "urlpattern-polyfill" ) ;
}
/**
* The above is the recommended way to load the ESM module, as it only
* loads it on demand, thus when not natively supported by the runtime or
* already polyfilled.
*/
import "urlpattern-polyfill" ;
/**
* In case you want to replace an existing implementation with the polyfill:
*/
import { URLPattern } from "urlpattern-polyfill" ;
globalThis . URLPattern = URLPattern Notiz:
Die Linie mit
// @ts-ignore: Property 'UrlPattern' does not existerforderlich, da sie vor dem Laden der Polyfill möglicherweise nicht verfügbar ist, und die Merkmalsprüfung in der Anweisung enthält einen Typenkriptfehler. Die ganze Idee ist, dass es lädt, wenn es nicht da ist.
// Conditional CJS module loading (Node.js)
if ( ! globalThis . URLPattern ) {
require ( "urlpattern-polyfill" ) ;
}
/**
* The above is the recommended way to load the CommonJs module, as it only
* loads it on demand, thus when not natively supported by the runtime or
* already polyfilled.
*/
require ( "urlpattern-polyfill" ) ;
/**
* In case you want to replace an existing implementation with the polyfill:
*/
const { URLPattern } = require ( "urlpattern-polyfill" ) ; ;
globalThis . URLPattern = URLPattern Notiz:
Unabhängig davon, wie Sie die Polyfüllung laden, wird sie immer zum globalen Objekt hinzugefügt.
let p = new URLPattern ( { pathname : '/foo/:name' } ) ;
let r = p . exec ( 'https://example.com/foo/bar' ) ;
console . log ( r . pathname . input ) ; // "/foo/bar"
console . log ( r . pathname . groups . name ) ; // "bar"
let r2 = p . exec ( { pathname : '/foo/baz' } ) ;
console . log ( r2 . pathname . groups . name ) ; // "baz" // Match same-origin jpg or png URLs.
// Note: This uses a named group to make it easier to access
// the result later.
const p = new URLPattern ( {
pathname : '/*.:filetype(jpg|png)' ,
baseURL : self . location
} ) ;
for ( let url in url_list ) {
const r = p . exec ( url ) ;
// skip non-matches
if ( ! r ) {
continue ;
}
if ( r . pathname . groups [ 'filetype' ] === 'jpg' ) {
// process jpg
} else if ( r . pathname . groups [ 'filetype' ] === 'png' ) {
// process png
}
}Das Muster kann in diesem Fall ohne Überprüfung der Herkunft vereinfacht werden, indem die BasisaRl abgelassen wird.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; Wir planen, auch eine "Kurzform" zur Initialisierung von Urlpatternobjekten zu unterstützen. Dies wird durch die Polyfill unterstützt, aber noch nicht durch die Chrom -Implementierung.
Zum Beispiel:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;Oder:
const p = new URLPattern ( "foo/*" , self . location ) ;Die API -Übersicht mit Anmerkungen vom TypeScript -Typ finden Sie unten. Zu den zugehörigen Browser -Web -IDL finden Sie hier.
type URLPatternInput = URLPatternInit | string ;
class URLPattern {
constructor ( init ?: URLPatternInput , baseURL ?: string ) ;
test ( input ?: URLPatternInput , baseURL ?: string ) : boolean ;
exec ( input ?: URLPatternInput , baseURL ?: string ) : URLPatternResult | null ;
readonly protocol : string ;
readonly username : string ;
readonly password : string ;
readonly hostname : string ;
readonly port : string ;
readonly pathname : string ;
readonly search : string ;
readonly hash : string ;
}
interface URLPatternInit {
baseURL ?: string ;
username ?: string ;
password ?: string ;
protocol ?: string ;
hostname ?: string ;
port ?: string ;
pathname ?: string ;
search ?: string ;
hash ?: string ;
}
interface URLPatternResult {
inputs : [ URLPatternInput ] ;
protocol : URLPatternComponentResult ;
username : URLPatternComponentResult ;
password : URLPatternComponentResult ;
hostname : URLPatternComponentResult ;
port : URLPatternComponentResult ;
pathname : URLPatternComponentResult ;
search : URLPatternComponentResult ;
hash : URLPatternComponentResult ;
}
interface URLPatternComponentResult {
input : string ;
groups : {
[ key : string ] : string | undefined ;
} ;
}Die Mustersyntax hier basiert auf dem, was in der beliebten Path-to-Regexp-Bibliothek verwendet wird.
"/" -Scharakter.":" -Scharakter und dann einem Namen. Zum Beispiel hat "/:foo/:bar" zwei benannte Gruppen."/:foo(.*)" wird die Standardeinstellung der Übereinstimmung mit dem nächsten Teiler überschreiben."?" , "*" oder "+" funktioniert genauso wie in regulären Ausdrücken. Wenn eine Gruppe optional oder wiederholt ist und ein Teiler vorausgeht, ist der Teiler auch optional oder wiederholt. Zum Beispiel "/foo/:bar?" passen "/foo" , "/foo/" oder "/foo/baz" überein. Durch die Flucht aus dem Teiler ist es stattdessen erforderlich."(.*)" (Sogenannte unbenannte Gruppen) zu entsprechen.Derzeit planen wir diese bekannten Unterschiede mit Path-to-Regexp:
URLs haben eine kanonische Form, die auf ASCII basiert, was bedeutet, dass internationalisierte Domain -Namen (Hostnames) auch eine kanonische ASCII -basierte Darstellung aufweisen und dass andere Komponenten wie hash , search und pathname unter Verwendung der prozentualen Codierung codiert werden.
Derzeit führt URLPattern keine Codierung oder Normalisierung der Muster durch. Daher müsste ein Entwickler URL -codieren, bevor sie das Muster in den Konstruktor übergeben. In ähnlicher Weise macht der Konstruktor keine Dinge wie Abflachung von Pfadnamen wie /foo/../Bar zu /bar. Derzeit muss das Muster geschrieben werden, um die kanonische URL -Ausgabe manuell anzusprechen.
Es führt jedoch diese Operationen für test() und exec() input aus.
Codierungskomponenten können leicht manuell durchgeführt werden, aber die Mustersyntax nicht codieren:
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"Wenn Sie Informationen zu einem Sicherheitsproblem oder einer Sicherheitsanfälligkeit mit einem Intel-Mainal-Open-Source-Projekt unter https://github.com/intel haben, senden Sie bitte eine E-Mail an [email protected]. Verschlüsseln Sie sensible Informationen mit unserem PGP Public Key. Für Probleme im Zusammenhang mit Intel-Produkten besuchen Sie bitte https://security-center.intel.com.
