URL: canParse() 静的メソッド

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

URL.canParse()URL の静的メソッドで、絶対 URL、またはベース URL と結合した相対 URL が解析可能で有効かどうかを示す論理値を返します。

これは URLtry...catch ブロック内で組み立てるための高速で簡単な代替手段です。 これは URL() コンストラクターが成功するのと同じ値に対しては true を返し、コンストラクターが例外を発生させる値に対しては false を返します。

構文

js
URL.canParse(url)
URL.canParse(url, base)

引数

url

絶対または相対 URL を表す文字列または文字列化のあるその他のオブジェクト、例えば <a><area> 要素です。 url が相対 URL である場合、base は必須であり、ベース URL として使用されます。 url が絶対 URL である場合、指定された base は無視されます。

base 省略可

url が相対 URL の場合に使用するベース URL を表す文字列です。 指定されなかった場合、既定値は undefined です。

メモ: 引数 urlbase はそれぞれ、文字列を受け入れる他の Web API と同様に、渡された値から文字列化されます。 具体的な例としては、既存の URL オブジェクトをどちらの引数にも使用することができ、そのオブジェクトの href プロパティに文字列化されます。

返値

その URL が解釈可能で有効であれば true、そうでなければ false を返します。

このライブ例では、静的メソッド URL.canParse() を使用して、いくつか異なる絶対 URL 値と相対 URL 値を使用する方法を示します。

例の最初の部分では、ログ出力先の HTML 要素 <pre> とログ出力するメソッド log() を定義しています。

html
<pre id="log"></pre>
js
const logElement = document.getElementById("log");
function log(text) {
  logElement.innerText += `${text}\n`;
}

次に、URL.canParse() メソッドに対応しているかどうかを、"canParse" in URL という条件を用いて調べます。 メソッドが対応している場合は、絶対 URL、ベース URLのない相対 URL、有効なベース URL のある相対 URL を調べた結果をログ出力します。 URL.canParse() が対応していない場合もログ出力します。

js
if ("canParse" in URL) {
  log("有効な絶対 URL を検査");
  let url = "https://developer.mozilla.org/";
  let result = URL.canParse(url);
  log(` URL.canParse("${url}"): ${result}`);

  log("\nベース URL のない相対 URL を検査");
  url = "/ja/docs";
  result = URL.canParse(url);
  log(` URL.canParse("${url}"): ${result}`);

  log("\n有効なベース URL のある相対 URL を検査");
  let baseUrl = "https://developer.mozilla.org/";
  result = URL.canParse(url, baseUrl);
  log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
} else {
  log("URL.canParse() に対応していません");
}

最後に、下記のコードは baseUrl が文字列である必要はないことを示しています。 ここでは URL オブジェクトを渡しています。

js
if ("canParse" in URL) {
  log("\nURL オブジェクトとして提供されたベース URL つきの相対 URL を検査");
  let baseUrl = new URL("https://developer.mozilla.org/");
  let url = "/ja/docs";
  result = URL.canParse(url, baseUrl);
  log(` URL.canParse("${url}","${baseUrl}"): ${result}`);
}

それぞれのチェック結果を下記に示します。

仕様書

Specification
URL
# dom-url-canparse

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
canParse() static method

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Has more compatibility info.

関連情報