JavaScriptでパスの末尾のスラッシュを除去する

location.pathname で得られる '/foo' や '/foo/' のようなパス名から、末尾のスラッシュを除去した文字列を得る方法の例を挙げる。

結論

// OK例
'/foo/bar/'.replace(/(.+)\/$/, '$1') // => '/foo/bar'
'/foo/bar/'.replace(/(.+)\/$/, (_, p1) => p1) // => '/foo/bar'
'/foo/bar/'.replace(/(?<!^)\/$/, '') // => '/foo/bar'

// NG例
'/'.replace(/\/$/, '') // => ''

OK例

パターン1. 末尾スラッシュより前の部分を残す

全体をマッチさせ、末尾スラッシュより前の部分のみをキャプチャして残す。

特殊文字列で置き換える場合

// マッチした場合、キャプチャ部分が'$1'に挿入される
'/foo/bar/'.replace(/(.+)\/$/, '$1') // => '/foo/bar'

// マッチしない場合は、そのままの文字列が返る
'/foo/bar'.replace(/(.+)\/$/, '$1') // => '/foo/bar'

関数で置き換える場合

// マッチした場合、キャプチャ部分が第二引数に与えられる
'/foo/bar/'.replace(/(.+)\/$/, (_, p1) => p1) // => '/foo/bar'

// マッチしない場合は、そのままの文字列が返る
'/foo/bar'.replace(/(.+)\/$/, (_, p1) => p1) // => '/foo/bar'

→ 正規表現は比較的単純だが String.prototype.replace() の仕様の知識が必要

パターン2. 末尾スラッシュを削除する

否定後読みで、先頭以外の末尾スラッシュのみをマッチさせ、空白文字に置換する。

'/foo/bar/'.replace(/(?<!^)\/$/, '') // => '/foo/bar'

→ replace の使い方は単純だが、正規表現の知識がより必要

NG例

location.pathname.replace(/\/$/, '') のように、単純に末尾のスラッシュのみを削除すると、 '/' (ルート) が '' になってしまう。

// ルート以外では機能するが
'/foo/bar/'.replace(/\/$/, '') // => '/foo/bar'

// ルートの場合に、空文字列になってしまう
'/'.replace(/\/$/, '') // => ''