KnowHub

URL パターン API

導入

URL パターン API は、正規表現とワイルドカードに基づいて URL を照合および解析します。

新しい URL パターン インスタンスを作成するためのコンストラクター URLPattern() を提供します。

const pattern = 新しい URLPattern(入力);

パターン インスタンスを使用すると、URL がパターンに準拠しているかどうかを判断できます。

const pattern = new URLPattern({ パス名: "/books" });
console.log(pattern.test("https://example.com/books")); // true

上記の例では、パターン インスタンスはパス /books を含む URL であり、インスタンス メソッド test() を使用して、指定された URL がパターンと一致するかどうかを確認し、結果は true になります。

URL パターンは、HTTP だけでなく複数のプロトコルをサポートします。

const pattern = new URLPattern("data\\:foo*");

上記の例では、URL パターンは新しいデータ プロトコル パターンを作成します。

コンストラクター URLPattern()

基本的な使い方

コンストラクター URLPattern() は、新しい URL パターン インスタンスを作成するために使用されます。

const pattern = 新しい URLPattern(入力);

コンストラクター パラメーター input は、パターン文字列またはパターン オブジェクトです。

新しい URLPattern("https://example.com/books/:id")
// {
// hasRegExpGroups: false,
// ハッシュ: "*",
// ホスト名: "example.com",
// パスワード: "*",
// パス名: "/books/:id",
// ポート: "",
// プロトコル: "https",
// 検索： "*"、
// ユーザー名: "*",
// ...
// }

上記の例では、パラメータ https://example.com/books/:id はパターン文字列であり、実行後、パターンの各コンポーネントを含む URLPattern インスタンス オブジェクトが返されます。

パラメータ「input」は、パターン URL の各部分を指定するプロパティを使用してオブジェクトとして記述することもできます。つまり、スキーマ オブジェクトは次のプロパティを持つことができます。

  • プロトコル -ユーザー名 -パスワード -ホスト名 -ポート -パス名
  • 検索 -ハッシュ -baseURL

上記の例でパラメータをパターンオブジェクトに変更すると次のようになります。

新しい URLPattern({
  プロトコル: 'https'、
  ホスト名: 'example.com'、
  パス名: '/books/:id',
})

パターン文字列またはパターン オブジェクトの未定義部分は、デフォルトで「*」になります。これは、ゼロ文字を含むすべての可能な文字を表します。

URLPattern() は通常、URLPattern インスタンス オブジェクトを返しますが、パラメータが無効であるか構文が正しくない場合は、エラーが報告されます。

new URLPattern(123) // エラーレポート

上記の例では、パラメータ「123」は有効な URL パターンではないため、エラーが報告されます。

パターン文字列が相対パスの場合、「URLPattern()」にはベース URL を指定する 2 番目のパラメータも必要であることに注意してください。

新しい URLPattern(入力、ベース URL)

上記のコードでは、2 番目のパラメーター baseURL がベース URL です。

new URLPattern('/books/:id') // エラーレポート
new URLPattern('/books/:id', 'https://example.com') // 正しい

上記の例では、最初のパラメータ /books/:id は相対パスです。この場合、ベース URL を指定するには 2 番目のパラメータ https://example.com が必要です。そうでない場合は、エラーが報告されます。 。

ただし、パラメータがパターン オブジェクトの場合は、URL パターンの一部のみを指定できます。

新しい URLPattern({
  パス名: '/books/:id'
}） // 正しい

上記の例では、パラメータがパターン オブジェクトであるため、パラメータにより URL のパターンの一部のみを指定できます。

スキーマ オブジェクト内では、ベース URL も指定できます。

let pattern4 = 新しい URLPattern({
  パス名: "/books/:id",
  ベースURL: "https://example.com",
});

ベース URL は有効な URL である必要があり、パターンを含めることはできません。

スキーマ オブジェクトを使用する場合、ベース URL を 2 番目のパラメーターとして使用することはできません。使用しない場合は、エラーが報告されます。

new URLPattern({ pathname: "/foo/bar" }, "https://example.com") // エラーレポート
new URLPattern({ pathname: "/foo/bar" }, "https://example.com/baz") // エラーレポート

上記の例では、パターン オブジェクトと 2 番目のパラメーターの両方が使用されており、エラーが報告されます。

URLpattern() は、設定オブジェクトのパラメータを追加して、一致動作をカスタマイズすることもできます。

新しい URLPattern(入力、オプション)
新しい URLPattern(入力、ベース URL、オプション)

上記のコードでは、パラメータ options が設定オブジェクトです。

現在、この設定オブジェクト options には 1 つの属性 ignoreCase しかありません。true に設定されている場合、デフォルト値は false であり、大文字と小文字が区別されます。

新しい URLPattern(input, {
  ignoreCase: false //デフォルト値、大文字と小文字は区別されます
})

以下の例を参照してください。

const pattern = new URLPattern("https://example.com/2022/feb/*");

pattern.test("https://example.com/2022/feb/xc44rsz") // true
pattern.test("https://example.com/2022/Feb/xc44rsz") // false

上記の例では、デフォルトでマッチングする場合、「feb」と「Feb」が区別されます。

ignoreCase でオフにすることができます。

const pattern = 新しい URLPattern(
  "https://example.com/2022/feb/*",
  {ignoreCase: true, }
);

pattern.test("https://example.com/2022/feb/xc44rsz") // true
pattern.test("https://example.com/2022/Feb/xc44rsz") // true

パターンライティング

パターン文字列は基本的に正規表現の形式で記述されますが、すべての正規構文がサポートされているわけではありません。たとえば、先読みアサーションや後読みアサーションはサポートされていません。

(1) 一般文字

すべて普通の文字であれば、そのまま一致することになります。

const p = 新しい URLPattern('https://example.com/abc');

上記のコードは、完全に一致するパス「https://example.com/abc」を表しています。

p.test('https://example.com') // false
p.test('https://example.com/a') //false
p.test('https://example.com/abc') // true
p.test('https://example.com/abcd') //false
p.test('https://example.com/abc/') //false
p.test('https://example.com/abc?123') //true

上記の例では、URL はパス https://example.com/abc と厳密に一致する必要があります。末尾に余分なスラッシュがあっても機能しませんが、クエリ文字列を追加すると機能します。

(2)「?」

量指定文字 ? は前の文字列を表し、0 回または 1 回出現できます。つまり、この部分はオプションです。

let pattern = 新しい URLPattern({
  プロトコル: "http{s}?",
});

上の例では、{s}? は、文字グループ s が 0 回または 1 回出現できることを意味します。

「?」にはパス区切り文字「/」は含まれません。

const pattern = new URLPattern("/books/:id?", "https://example.com");

pattern.test("https://example.com/books/123") // true
pattern.test("https://example.com/books") // true
pattern.test("https://example.com/books/") // false
pattern.test("https://example.com/books/123/456") // false
pattern.test("https://example.com/books/123/456/789") // false
pattern.test("https://example.com/books/123/456/") // false

上の例では、「?」は URL の末尾のスラッシュと一致できません。

一致させる必要がある場合は、末尾のスラッシュを「{}」の中に入れることができます。

const pattern = new URLPattern({ pathname: "/product{/}?" });

pattern.test({ パス名: "/product" }) // true
pattern.test({ パス名: "/product/" }) // true

上の例では、URL の末尾にスラッシュがあるかどうかに関係なく、「{/}?」は正常に一致します。

(3)+

数量詞文字「+」は、前の文字列が 1 回以上出現することを示します。

const pattern = 新しい URLPattern({
  パス名: "/books/(\\d+)",
})

上の例では、「\d+」は 1 つ以上の数字を表します。「\d」は組み込みの文字クラスで、0 から 9 までの数字を表します。二重引用符で囲まれているため、その前にバックスラッシュもあります。エスケープするにはバックスラッシュを追加します。

「+」には「/」で区切られたパスの複数の部分を含めることができますが、パスの末尾のスラッシュは含めません。

const pattern = new URLPattern("/books/:id+", "https://example.com");

pattern.test("https://example.com/books/123") // true
pattern.test("https://example.com/books") // false
pattern.test("https://example.com/books/") // false
pattern.test("https://example.com/books/123/456") // true
pattern.test("https://example.com/books/123/456/789") // true
pattern.test("https://example.com/books/123/456/") // false

(4)*

数量詞文字「*」は、0 個以上の出現を意味します。

const pattern = new URLPattern('https://example.com/{abc}*');

pattern.test('https://example.com') // true
pattern.test('https://example.com/') // true
pattern.test('https://example.com/abc') // true
pattern.test('https://example.com/abc/') // false
pattern.test('https://example.com/ab') // false
pattern.test('https://example.com/abcabc') // true
pattern.test('https://example.com/abc/abc/abc') // false

上記の例では、「{abc}*」は「abc」が 0 回以上出現することを意味し、パス区切り文字「/」は含まれません。

* の前に文字がない場合は、ゼロ文字と区切り文字 / を含むすべての文字を意味します。

let pattern = 新しい URLPattern({
  検索： "*"、
  ハッシュ: "*"、
});

上記の例では、「*」はゼロ文字を含むすべての文字と一致することを意味します。

別の例を示します。

const pattern = new URLPattern("/*.png", "https://example.com");

pattern.test("https://example.com/image.png") // true
pattern.test("https://example.com/image.png/123") // false
pattern.test("https://example.com/folder/image.png") // true
pattern.test("https://example.com/.png") // true

* の一致部分は、対応する部分の数値属性から取得できます。

const pattern = 新しい URLPattern({
  ホスト名: "example.com",
  パス名: "/foo/*"
});

const result = pattern.exec("/foo/bar", "https://example.com/baz");

result.pathname.input // '/foo/bar'
result.pathname.groups[0] // 'バー'

上記例では、「pathname.groups[0]」から「*」のマッチング結果が得られます。

const pattern = new URLPattern({ ホスト名: "*.example.com" });
const result = pattern.exec({ ホスト名: "cdn.example.com" });

result.hostname.groups[0] // 'cdn'
result.hostname.input // 'cdn.example.com'

上記の例では、「hostname.groups[0]」から「*」のマッチング結果が得られます。

(5)「{}」

特殊文字 {} は、量指定子 ?、+、および + の有効範囲を定義するために使用されます。

{} の後に量指定子がない場合、それが使用されない場合と同じ効果があります。

const pattern = new URLPattern('https://example.com/{abc}');

pattern.test('https://example.com/') // false
pattern.test('https://example.com/abc') // true

(6)「()」

特殊文字 () はグループ一致を定義するために使用され、一致結果は出現順の番号に従って pathname.groups オブジェクトから取得できます。

const pattern = new URLPattern("/books/(\\d+)", "https://example.com");
pattern.exec("https://example.com/books/123").pathname.groups
// { '0': '123' }

上の例では、(\\d+) はグループ一致です。これは最初のグループ一致であるため、一致結果は pathname.groups の属性 0 に配置されます。

(7)|

特殊文字「|」は、出現する可能性のある左側と右側の文字を表し、論理「OR」を意味します。

let pattern = 新しい URLPattern({
  ポート: "(80|443)"、
});

上の例では、「(80|443)」は 80 または 443 を意味します。

(8)「:」

特殊文字「:」は、名前付きグループの一致を定義するために使用され、その後に変数名が続きます。

let pattern = 新しい URLPattern({
  パス名: "/:パス",
});

上記の例では、「/:path」はスラッシュの後の部分を表し、これがキャプチャされて変数「path」に入れられます。この部分は、一致結果の「pathname.groups」の対応する属性から取得できます。

const pattern = new URLPattern({ パス名: "/books/:id" });

pattern.exec("https://example.com/books/123").pathname.groups
// { id: '123' }

上記の例では、「pathname.groups」は、その属性がすべて正常にキャプチャされたグループ変数であるオブジェクトを返します。上記の例では、それは「id」です。

別の例を示します。

const pattern = new URLPattern({ パス名: "/:product/:user/:action" });
const result = pattern.exec({ パス名: "/store/wanderview/view" });

result.pathname.groups.product // 'ストア'
result.pathname.groups.user // 'ワンダービュー'
result.pathname.groups.action // 'ビュー'
result.pathname.input // '/store/wanderview/view'

上記の例では、「:product」、「:user」、「:action」の一致結果は、「pathname.groups」の対応する属性から取得できます。

グループ一致はパターンの前に配置できます。

const pattern = 新しい URLPattern(
  "/books/:id(\\d+)",
  「https://example.com」
);

上の例では、グループ一致 :id の後にモデル定義 \\d+ が続き、パターンを括弧で囲む必要があります。

(9) 特殊文字エスケープ

特殊文字を通常の文字として使用する場合は、特殊文字の前に二重バックスラッシュを追加してエスケープする必要があります。

let pattern1 = 新しい URLPattern({
  パス名: "/a:b",
});

let pattern2 = 新しい URLPattern({
  パス名: "/a\\:b",
});

上記の例の「a:b」は、パスが文字「a」で始まり、以降の部分が変数「b」に代入されることを意味します。そして、「a\:b」はパス自体が「a:b」であることを意味します。

##インスタンスのプロパティ

URLPattern インスタンスのプロパティは、「URLPattern()」のパターン オブジェクト パラメータのさまざまな部分に対応します。

const pattern = 新しい URLPattern({
  ホスト名: "{*.}?example.com",
});

pattern.hostname // '{*.}?example.com'
パターン.プロトコル // '*'
パターン.ユーザー名 // '*'
パターン.パスワード // '*'
パターン.ポート // ""
パターン.パス名 // '*'
pattern.search // '*'
パターン.ハッシュ // '*'

上記の例では、pattern はインスタンス オブジェクトであり、そのプロパティは URLPattern() のパラメータ オブジェクトのプロパティと一致します。

「search」には先頭の「?」が含まれず、「hash」には先頭の「#」が含まれませんが、「pathname」には先頭の「/」が含まれることに注意してください。

別の例を示します。

const pattern = new URLPattern("https://cdn-*.example.com/*.jpg");

pattern.protocol // 'https'
pattern.hostname // 'cdn-*.example.com'
パターン.パス名 // '/*.jpg'
パターン.ユーザー名 // ''
パターン.パスワード // ''
パターン.検索 // ''
パターン.ハッシュ // ''

##インスタンスメソッド

exec()

インスタンスの exec() メソッドは、パターンを使用してパラメータ URL を解析し、一致する結果を返します。

exec() メソッドのパラメータは new URLPattern() と同じです。 URL 文字列を指定することもできます。

pattern.exec("https://store.example.com/books/123");

最初のパラメータが相対 URL の場合、2 番目のパラメータとしてベース URL が必要です。

pattern.exec("/foo/bar", "https://example.com/baz");

exec() メソッドのパラメータはオブジェクトにすることもできます。

パターン.exec({
  プロトコル: "https"、
  ホスト名: "store.example.com",
  パス名: "/books/123",
});

一致が成功すると、一致の結果を含むオブジェクトが返されます。一致が失敗した場合は、「null」が返されます。

const pattern = new URLPattern("http{s}?://*.example.com/books/:id");
pattern.exec("https://example.com/books/123") // null

上の例では、一致が失敗すると「null」が返されます。

成功した一致によって返されるオブジェクトには inputs 属性があり、これには pattern.exec() に渡されるパラメーター配列が含まれます。他の属性の値もオブジェクトであり、オブジェクトの input プロパティは受信値に対応し、groups プロパティには各グループの一致が含まれます。

const pattern = new URLPattern("http{s}?://*.example.com/books/:id");
let match = pattern.exec("https://store.example.com/books/123");

match.inputs // ['https://store.example.com/books/123']
match.protocol // { 入力: "https"、グループ: {} }
match.username // { 入力: ""、グループ: {} }
match.password // { 入力: ""、グループ: {} }
match.hostname // { input: "store.example.com", groups: { "0": "store" } }
match.port // { 入力: ""、グループ: {} }
match.pathname // { 入力: "/books/123"、グループ: { "id": "123" } }
match.search // { 入力: ""、グループ: {} }
match.hash // { 入力: ""、グループ: {} }

テスト（）

インスタンスの test() メソッドは、パラメータ URL が現在のパターンと一致するかどうかをチェックするために使用されます。

そのパラメータは URLPattern() と同じで、パターン文字列またはパターン オブジェクトにすることができます。

const pattern = 新しい URLPattern({
  ホスト名: "example.com",
  パス名: "/foo/*"
 });

パターン.テスト({
  パス名: "/foo/bar",
  ベースURL: "https://example.com/baz",
}） // 真実

pattern.test("/foo/bar", "https://example.com/baz") // true

通常、ブール値を返します。ただし、構文が不正な場合もエラーがスローされます。

pattern.test({ pathname: "/foo/bar" }, "https://example.com/baz") // エラーレポート

作者: wangdoc

アドレス: https://wangdoc.com/

ライセンス: クリエイティブ・コモンズ 3.0

前の章次の章