URLを作成したり操作する

URLを作成したり操作をするには、URLオブジェクトを使用します。
URLオブジェクトは、URLを新規に作成したり、URLを解析して編集や取得などの操作を行うことができます。
URLオブジェクトができる前までは、自前で解析処理を書いたり、一時的にa要素作りhref属性に代入して操作するなどしていました。

  • ※ IE8以下には対応していません。
目次
  1. 作成または解析
  2. URLの各情報を取得または設定
  3. クエリ文字列（URLパラメーター）を解析
  4. 全てを結合して1つのURLの文字列として取得

作成または解析

作成または解析するには、URLオブジェクトを使用します。

構文

ES5

var obj = new URL(url, [base]);

ES6以降

let obj = new URL(url, [base]);

引数

引数名 型 初期値 説明
第一引数
必須		 url string   解析するURL。
httpから始まるような絶対パスか、相対パスで指定する。
絶対パスで指定した場合は、第二引数は無視される。
相対パスで指定した場合は、第二引数を指定する必要がある（必須）。
//から始まるパスを指定した場合は、相対パスと同じ第二引数を指定する必要がある。
第二引数 base string '' 第一引数の基準となるURL。
正規化されて解析される。
第一引数が絶対パスで指定された場合は無視される。
最後のスラッシュはあってもなくても問題ない。

戻り値

生成されたインスタンスのオブジェクトを返します。

サンプルコード

JavaScript (ES5)

// 任意のURL
var url = new URL('https://www.example.co.jp/foo/bar/page.html?key1=abc&key2=123#xyz');

// 現在のアクセス中のURL
var url = new URL(location.href);

// 相対パス
var url = new URL('./baz/qux/page.html?key1=abc&key2=123#xyz', 'https://www.example.co.jp/foo/bar');

// ルート相対パス
var url = new URL('/baz/qux/page.html?key1=abc&key2=123#xyz', 'https://www.example.co.jp/foo/bar');

JavaScript (ES6以降)

// 任意のURL
let url = new URL('https://www.example.co.jp/foo/bar/page.html?key1=abc&key2=123#xyz');

// 現在のアクセス中のURL
let url = new URL(location.href);

// 相対パス
let url = new URL('./baz/qux/page.html?key1=abc&key2=123#xyz', 'https://www.example.co.jp/foo/bar');

// ルート相対パス
let url = new URL('/baz/qux/page.html?key1=abc&key2=123#xyz', 'https://www.example.co.jp/foo/bar');

URLの各情報を取得または設定

URLの各情報を取得または設定には、次のプロパティを使用します。

プロパティ

プロパティ名 型 初期値 説明
href string '' 絶対パス。
取得する場合は全ての情報が結合されたURLを返す。
origin string '' プロトコルからポート番号までの情報。
protocol string '' プロトコル。
取得する場合はコロン（:）を含んで返す。
host string '' ドメイン（ホスト）からポート番号までのオーソリティ。
hostname string '' ドメイン（ホスト）のFQDN。
hostプロパティのポート番号を除いた情報。
username string '' ユーザー名。
password string '' パスワード。
port string '' ポート番号。
pathname string '' パス。
取得する場合はルート相対パスで返す。
設定する場合は設定した値は全てルート相対パスとして扱われる。
search string '' クエリ文字列（URLパラメーター）。
取得する場合は先頭にクエスチョンマーク（?）を含んで返す。
ただしクエリ文字列（URLパラメーター）が存在しない場合は空を返す。
hash string '' ハッシュフラグメント。
取得する場合は先頭にハッシュ（#）を含んで返す。
ただしハッシュフラグメントが存在しない場合は空を返す。

構文

ES5

// 取得
var result = URL.プロパティ名;

// 設定
URL.プロパティ名 = 設定値;

ES6以降

// 取得
const result = URL.プロパティ名;

// 設定
URL.プロパティ名 = 設定値;

戻り値

URLSearchParamsオブジェクトを返します。

サンプルコード

JavaScript (ES5)

var url = new URL('https://www.example.co.jp/foo/bar/page.html');

// 取得
alert(url.pathname); // /foo/bar/page.html

// 設定
url.pathname = 'baz/qux.html';

alert(url.href); // https://www.example.co.jp/baz/qux.html

JavaScript (ES6以降)

let url = new URL('https://www.example.co.jp/foo/bar/page.html');

// 取得
console.log(url.pathname); // /foo/bar/page.html

// 設定
url.pathname = 'baz/qux.html';

console.log(url.href); // https://www.example.co.jp/baz/qux.html

クエリ文字列（URLパラメーター）を解析

クエリ文字列（URLパラメーター）を解析するには、URL.searchParamsプロパティを使用します。
クエリ文字列（URLパラメーター）を追加、変更、削除など細かい操作が行えます。

構文

ES5

var params = URL.searchParams;

ES6以降

let params = URL.searchParams;

戻り値

URLSearchParamsオブジェクトを返します。

サンプルコード

JavaScript (ES5)

var url = new URL('https://www.example.co.jp/foo/bar/page.html?q=abc');

var  params = url.searchParams;

alert(params.get('q')); // abc

JavaScript (ES6以降)

let url = new URL('https://www.example.co.jp/foo/bar/page.html?q=abc');

const  params = url.searchParams;

console.log(params.get('q')); // abc

searchParamsプロパティ（URLSearchParamsオブジェクト）についての詳細な使用方法は、次のページをご覧ください。
クエリ文字列（URLパラメーター）を作成したり操作する

全てを結合して1つのURLの文字列として取得

全てを結合して1つのURLの文字列として取得するには、URL.toStringメソッドを使用します。
基本的にはURL.hrefプロパティと同じ値を返します。

構文

ES5

var url = URL.toString();

ES6以降

let url = URL.toString();

戻り値

結合された1つのURLの文字列を返します。

サンプルコード

JavaScript (ES5)

var url = new URL('https://www.example.co.jp/foo/bar/page.html');

url.port = 8080;
url.path = 'baz/sample.html'
url.hash = 'abc';

alert(url.toString()); // https://www.example.co.jp:8080/baz/sample.html#abc

JavaScript (ES6以降)

let url = new URL('https://www.example.co.jp/foo/bar/page.html');

url.port = 8080;
url.path = 'baz/sample.html'
url.hash = 'abc';

console.log(url.toString()); // https://www.example.co.jp:8080/baz/sample.html#abc

JavaScript逆引きリファレンス一覧へ戻る