urlpattern polyfill
1.0.0
Urlpattern - это новый веб -API для соответствующих URL -адресов. Он предназначен как для предоставления удобного API для веб -разработчиков, так и для использования в других веб -API, которые должны соответствовать URL; Например, обслуживание работников. Объяснитель обсуждает мотивирующие варианты использования.
Это многофиль для API urlpattern, так что эта функция доступна в браузерах, которые не поддерживают его назначен. Этот многофилл проходит тот же набор тестирования веб -платформы.
Полифилл работает в браузерах (модуль ESM) и в node.js либо через Import (модуль ESM), либо через потребность (модуль CJS).
Полифилл будет загружен только в том случае, если urlpattern еще не существует на глобальном объекте, и в этом случае он добавит его в глобальный объект.
// 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 Примечание:
Линия с
// @ts-ignore: Property 'UrlPattern' does not existв некоторых средах, потому что перед загрузкой полифилла она может быть недоступна, а проверка функций в операторе IF дает ошибку типовойпис. Вся идея заключается в том, что он загружается, когда его нет.
// 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 Примечание:
Независимо от того, как вы загружаете полифилл, когда в вашей среде нет реализации, это всегда будет добавлять его в глобальный объект.
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
}
}В этом случае шаблон может быть проще без проверки происхождения, оставив Baseurl.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; Мы планируем также поддерживать «короткую форму» для инициализации объектов urlpattern. Это подтверждается полифиллом, но еще не внедрением хрома.
Например:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;Или:
const p = new URLPattern ( "foo/*" , self . location ) ;Обзор API с аннотациями типа TypeScript находится ниже. Связанный браузер Web IDL можно найти здесь.
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 ;
} ;
}Синтаксис шаблона здесь основан на том, что используется в популярной библиотеке Path-to-Regexp.
"/" .":" , а затем имени. Например, "/:foo/:bar" имеет две названные группы."/:foo(.*)" переоценит по умолчанию соответствие следующему разделителю."?" , "*" , или "+" функционирует так же, как и в регулярных выражениях. Когда группа является необязательной или повторяющейся, и ей предшествует разделитель, то делитель также является необязательным или повторяемым. Например, "/foo/:bar?" будет соответствовать "/foo" , "/foo/" , или "/foo/baz" . Вместо этого сбежать от разделителя сделает это необходимым."(.*)" (Так называемых неназванных групп).В настоящее время мы планируем иметь эти известные различия с Path-re-regexp:
URL имеют каноническую форму, основанную на ASCII, что означает, что интернационализированные доменные имена (имена хостов) также имеют каноническое представление на основе ASCII, и что другие компоненты, такие как hash , search и pathname кодируются с использованием процентов кодирования.
В настоящее время URLPattern не выполняет никаких кодировки или нормализации паттернов. Таким образом, разработчик должен будет URL кодировать символы Unicode, прежде чем передавать шаблон в конструктор. Точно так же конструктор не делает такие вещи, как сглаживание путей, таких как /foo/../bar to /bar. В настоящее время шаблон должен быть записан на целевой канонический выход URL -адреса вручную.
Это, однако, выполняет эти операции для test() и exec() .
Кодирующие компоненты можно легко выполнить вручную, но не кодируют синтаксис рисунка:
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"Если у вас есть информация о проблеме безопасности или уязвимости с помощью проекта с открытым исходным кодом Intel на https://github.com/intel, отправьте электронное письмо по адресу [email protected]. Зашифруйте конфиденциальную информацию с использованием нашего открытого ключа PGP. Для проблем, связанных с продуктами Intel, пожалуйста, посетите https://security-center.intel.com.
