O URLPattern é uma nova API da Web para URLs correspondentes. Destina -se a fornecer uma API conveniente para desenvolvedores da Web e ser utilizável em outras APIs da Web que precisam corresponder aos URLs; por exemplo, trabalhadores de serviço. O explicador discute os casos de uso motivadores.
Este é um poli -preenchimento para a API URLPattern, para que o recurso esteja disponível em navegadores que não o suporte nativamente. Este poli -fil passa o mesmo conjunto de testes de plataforma da web.
O Polyfill funciona em navegadores (módulo ESM) e no Node.js via importação (módulo ESM) ou via requer (módulo CJS).
O polifill só será carregado se o urlpattern já não existir no objeto global e, nesse caso, ele o adicionará ao objeto global.
// 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 Observação:
A linha com
// @ts-ignore: Property 'UrlPattern' does not existé necessária em alguns ambientes, porque antes de carregar o poli -filo, ela pode não estar disponível, e a verificação do recurso na instrução IF fornece um erro de digitação. A idéia é que ele carrega quando não está lá.
// 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 Observação:
Não importa como você carregue o poli -preenchimento, quando não houver implementação em seu ambiente, ele sempre o adicionará ao objeto global.
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
}
}O padrão neste caso pode ser mais simples sem a verificação de origem deixando de fora o BaseUrl.
// Match any URL ending with 'jpg' or 'png'.
const p = new URLPattern ( { pathname : '/*.:filetype(jpg|png)' } ) ; Planejamos também suportar um "formulário curto" para inicializar os objetos URLPattern. Isso é suportado pelo Polyfill, mas ainda não pela implementação do cromo.
Por exemplo:
const p = new URLPattern ( "https://*.example.com/foo/*" ) ;Ou:
const p = new URLPattern ( "foo/*" , self . location ) ;Visão geral da API com anotações do tipo TypeScript é encontrada abaixo. O IDL da Web do navegador associado pode ser encontrado aqui.
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 ;
} ;
}A sintaxe do padrão aqui é baseada no que é usado na biblioteca popular de caminho para regexp.
"/" .":" e depois um nome. Por exemplo, "/:foo/:bar" tem dois grupos nomeados."/:foo(.*)" substituirá o padrão de corresponder ao próximo divisor."?" , "*" ou "+" funciona exatamente como em expressões regulares. Quando um grupo é opcional ou repetido e é precedido por um divisor, o divisor também é opcional ou repetido. Por exemplo, "/foo/:bar?" Combinará "/foo" , "/foo/" ou "/foo/baz" . A fuga do divisor o tornará necessário."(.*)" (Os chamados grupos sem nome).Atualmente, planejamos ter essas diferenças conhecidas com o caminho para o regexp:
Os URLs têm uma forma canônica baseada em ASCII, o que significa que os nomes de domínio internacionalizados (nomes de host) também têm uma representação baseada em ASCII canônica, e que outros componentes como hash , search e pathname são codificados usando codificação percentual.
Atualmente, URLPattern não executa nenhuma codificação ou normalização dos padrões. Portanto, um desenvolvedor precisaria codificar os caracteres Unicode antes de passar o padrão para o construtor. Da mesma forma, o construtor não faz coisas como nomes de caminho achatados, como /foo/../bar to /bar. Atualmente, o padrão deve ser escrito para direcionar a saída de URL canônica manualmente.
No entanto, realiza essas operações para a entrada test() e exec() .
Os componentes de codificação podem ser facilmente feitos manualmente, mas não codificando a sintaxe do padrão:
encodeURIComponent ( "?q=æøå" )
// "%3Fq%3D%C3%A6%C3%B8%C3%A5" new URL ( "https://ølerlækkernårdetermit.dk" ) . hostname
// "xn--lerlkkernrdetermit-dubo78a.dk"Se você tiver informações sobre um problema de segurança ou vulnerabilidade com um projeto de código aberto mantido na Intel em https://github.com/intel, envie um e-mail para [email protected]. Criptografar informações confidenciais usando nossa chave pública do PGP. Para questões relacionadas aos produtos Intel, visite https://security-center.intel.com.