【Javascript】phpのparse_url関数のようなことをJavascriptでやりたい

Tweet

Category JavaScript 2012/07/16

問題

phpはURL文字列を部分ごとに分割してくれる関数がありますよね。Javascriptでも簡単にできますか？

parse_url — URL を解釈し、その構成要素を返す

example

<?php
$url = 'https://www.softel.co.jp:8080/blogs/tech/wp-admin/post.php?post=3419&action=edit#abcdefg';
print_r(parse_url($url));
?>

Array
(
    [scheme] => https
    [host] => www.softel.co.jp
    [port] => 8080
    [path] => /blogs/tech/wp-admin/post.php
    [query] => post=3419&action=edit
    [fragment] => abcdefg
)

↑ と似たようなことがしたい。

答え

URL文字列を解釈する機能をがんばって作る必要はたぶんない（IE以外なら……）。

Webブラウザならではの方法でやってみる。

以下ではjqueryを使っているが、素のJavascriptでdocument.createElementしてもよい。

１ a要素を生成する

$('<a></a>');

２ 生成したa要素のhref属性に解析したいURL文字列をセットする

$('<a href="https://www.softel.co.jp:8080/blogs/tech/wp-admin/post.php?post=3419&action=edit#abcdefg"></a>');

３ URLについてa要素に教えてもらう

var a = $('<a href="https://www.softel.co.jp:8080/blogs/tech/wp-admin/post.php?post=3419&action=edit#abcdefg"></a>');

/* リンク先URL → href */
a[0].href // "https://www.softel.co.jp:8080/blogs/tech/wp-admin/post.php?post=3419&action=edit#abcdefg"
/* プロトコル → protocol */
a[0].protocol // "https:"
/* ホスト名:ポート → host */
a[0].host // "www.softel.co.jp:8080"
/* ホスト名 → hostname */
a[0].hostname // "www.softel.co.jp"
/* ポート → port */
a[0].port // "8080"
/* リンク先アンカー → hash */
a[0].hash // "#abcdefg"
/* パス名 → pathname */
a[0].pathname // "/blogs/tech/wp-admin/post.php"
/* クエリ文字列 → search */
a[0].search // "?post=3419&action=edit"

４ 気になる場合は後始末もしておく

a.remove();

その他メモ

注意 IEでは、絶対URL（http://などから始まるの）をhref属性に渡すとうまくいくが、相対URLを渡したときは、いろいろと教えてもらえないので注意（protocolやhostnameなどが空で、pathnameは相対パスのままと言った有様）。

IE以外では、href属性に相対URLをセットすると、すべて補って教えてくれる。便利。

hrefだけはIEでも大丈夫なようで、href属性に相対URLを渡した後でhref属性を参照すると、現在のURLからの絶対URLを取得できる。便利。IEでも絶対URLが欲しいときだけは使える。

phpのparse_urlの図

http://username:password@www.example.com:443/path/file.name?query=string#anchor
|_____||______| |______| |_____________| |_||_____________||___________||_____|
   |       |       |           |          |         |             |         |
scheme    user    pass        host       port      path         query   fragment

Javascriptのa要素の図

http://username:password@www.example.com:443/path/file.name?query=string#anchor
|___|  |______| |______| |_____________| |_||_____________||___________||_____|
   |       |       |           |          |         |             |         |
protocol  用意されてない？    host       port      pathname     search     hash
                         |_________________|
                                  |
                               hostname
|______________________________________________________________________________|
                                       |
                                      href

demo URLを入力して、Enter押下