More than 5 years have passed since last update.

【Javascript】表示ページ名を取得するgetNameFromURL関数

JavaScript

Last updated at 2015-05-30Posted at 2015-01-03

getNameFromURL関数


function getNameFromURL(){
 return basename(location.pathname);
}

function basename(path, suffix){
  // http://kevin.vanzonneveld.net
  // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // +   improved by: Ash Searle (http://hexmen.com/blog/)
  // +   improved by: Lincoln Ramsay
  // +   improved by: djmix
  // *     example 1: basename('/www/site/home.htm', '.htm');
  // *     returns 1: 'home'
  // *     example 2: basename('ecra.php?p=1');
  // *     returns 2: 'ecra.php?p=1'
  var b = path.replace(/^.*[\/\\]/g, '');

  if (typeof(suffix) == 'string' && b.substr(b.length - suffix.length) == suffix) {
    b = b.substr(0, b.length - suffix.length);
  }

  return b;
}

例

001.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>getNameFromURL</title>
<style type="text/css">
</style>
</head>
<body>

<script type="text/javascript">

document.write ("location.pathname="+location.pathname);
document.write ("<br/>\n")
document.write ("location.href="+location.href);
document.write ("<br/>\n")
document.write ("getNameFromURL()="+getNameFromURL());
document.write ("<br/>\n")
document.write ("getNameFromURL2()="+getNameFromURL2());
document.write ("<br/>\n")

function getNameFromURL(){
 return basename(location.pathname);
}

function getNameFromURL2(){
 return basename(location.href);
}

function basename(path, suffix) {
  //  discuss at: http://phpjs.org/functions/basename/
  // original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
  // improved by: Ash Searle (http://hexmen.com/blog/)
  // improved by: Lincoln Ramsay
  // improved by: djmix
  // improved by: Dmitry Gorelenkov
  //   example 1: basename('/www/site/home.htm', '.htm');
  //   returns 1: 'home'
  //   example 2: basename('ecra.php?p=1');
  //   returns 2: 'ecra.php?p=1'
  //   example 3: basename('/some/path/');
  //   returns 3: 'path'
  //   example 4: basename('/some/path_ext.ext/','.ext');
  //   returns 4: 'path_ext'

  var b = path;
  var lastChar = b.charAt(b.length - 1);

  if (lastChar === '/' || lastChar === '\\') {
    b = b.slice(0, -1);
  }

  b = b.replace(/^.*[\/\\]/g, '');

  if (typeof suffix === 'string' && b.substr(b.length - suffix.length) == suffix) {
    b = b.substr(0, b.length - suffix.length);
  }

  return b;
}
/*

http://localhost/test/001.html?aaa=bbb#cccに、
アクセスした実行結果
location.pathname=/test/001.html
location.href=http://localhost/test/001.html?aaa=bbb#ccc
getNameFromURL()=001.html
getNameFromURL2()=001.html?aaa=bbb#ccc

*/
</script>

</body>
</html>

解説

location.pathnameでパスを取得してそのパスをbasename関数に入れると表示ページの名前を取得できる。


function getNameFromURL(){
 return basename(location.href);
}

前までは、location.hrefを使用していたが、これでは、クエリ文字列や、フラグメント識別子まで取得してしまうから、location.pathnameを使用することにした。「表示ページ名を取得する」って説明では分かりにくいかもしれないので、Apacheなどのサーバを起動させて、testフォルダを作って、例に書いた001.htmlを作りtestフォルダの中にいれて、http://localhost/test/001.html?aaa=bbb#cccにアクセスすると「表示ページ名を取得する」って何を言ってるのか分かっていただけると思います。

参考文献

ロケーション（Location）
JavaScript basename function - php.js

【Javascript】表示ページ名を取得するgetNameFromURL関数

例

解説

参考文献

関連