URLのパスに # や () がある場合に、parse_url() や new URL() はどのように使えばいいですか？

Question

実現したいこと

パスに # や () があるURLを、JavaScriptとPHPでパースしたい（parse_url の結果や new URL() の結果と同じものを得たい）です。

発生している問題

例えば # がある場合、parse_url() の path や、new URL() の pathname が、# の手前で終わってしまいます。

該当のソースコード

こちらです。いずれも「#」の手前で終わってしまいます。

$url = 'http://example.com/episode/ルパン三世(#3)';
$parse = parse_url($url); // path が "/episode/ルパン三世(" になってしまう
var_dump( $parse );

var url = 'http://example.com/episode/ルパン三世(#3)';
var parse = new URL(url); // pathname が "/episode/%E3%83%AB%E3%83%91%E3%83%B3%E4%B8%89%E4%B8%96(" になってしまう
console.log( parse );

試したこと

phpでは urlencode() や rawurlencode() をかけてみましたがこれではすべてが path として該当していまいました。

またJavaScriptでも同じようにencodeURI() や encodeURIComponent()などをかけてみたのですが同じでした。

$url = 'http://example.com/episode/ルパン三世(#3)';
$encode = urlencode($url);
$parse = parse_url($encode); 
var_dump( $parse ); // path が全て該当してしまう

$url = 'http://example.com/episode/ルパン三世(#3)';
$encode = rawurlencode($url);
$parse = parse_url($encode); 
var_dump( $parse ); // path が全て該当してしまう

そしてMDNで見てますと

エスケープされないもの:
A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) #

とありました。

もしかして、これらの文字列を一つずつ正規表現でパーセントエンコードする必要があるということでしょうか？例えばJavaScriptだとこうでしょうか？

var url = 'http://example.com/episode/ルパン三世(#3)';
var encode = my_encodeURI(url);
var parse = new URL(encode);
console.log( parse )
console.log( my_decodeURI(parse.pathname) ); // 無事に pathname に  "/episode/ルパン三世(#3)" が取得できる

function my_encodeURI( url ){
	let result = encodeURI(url);
	result = result.replace(/\#/g, '%23'); 
	result = result.replace(/\(/g, '%28'); 
	result = result.replace(/\)/g, '%29'); 
	return result;
}

function my_decodeURI( url ){
	let result = decodeURI(url);
	result = result.replace(/%23/g, '#'); 
	result = result.replace(/\%28/g, '()'); 
	result = result.replace(/%29/g, ')'); 
	return result;
}

こんな手作業でやらずともビシっとよしなにしてくれる方法がありそうに思えたので質問させて頂きました。
宜しくお願い致します。

実際の使い方

尚、実際の使い方としては、このようなaタグをクリックした際にJavaScrpitでPOSTし、phpでパスを分解する、などを想定しております。
<a href="http://example.com/episode/ルパン三世(#3)">ルパン三世(#3)</a>

Comments

[arcxor]

> $url = 'http://example.com/episode/ルパン三世(#3)';

こんな URL を前提にしたらうまくいくはずがないでしょう。 # はフラグメントの区切り文字です。# 以降はフラグメントとして扱われます。それはパスの一部ではありません。

どういう状況でURLを処理したいのか、前提をもう少し詳しく書いてください。

[nikuatsu]

ありがとうございます。なんと、URL自体がそもそもアウトでしたか。
ちょうど「実際の使い方」としてイメージを追加したのですが、こんなhrefは使わぬ方がいいでしょうか？

[arcxor]

# をパスの一部の文字として使う場合はパーセントエンコーディングされなければなりません。

つまり、yambejp 氏が指摘している通り、$url には以下の文字列がセットされている前提で考えるべきです。

$url = 'http://example.com/episode/%E3%83%AB%E3%83%91%E3%83%B3%E4%B8%89%E4%B8%96(%233)';

[nikuatsu]

ということは、<a>クリック時に、質問にある
const url = my_encodeURI(href);
をかけて、このurlをPOSTするという手続きがベストでしょうか？

それとも#を使うこと自体避けた方がいいですか？

Answer 1

そもそもの考え方がおかしいのでは？

<?PHP
$url = 'http://example.com/episode/'.urlencode('ルパン三世(#3)');
$parse = parse_url($url);
var_dump( $parse );
print urldecode($parse["path"]);

追記

パラメータで「ルパン三世(#3)」を渡す

<?PHP
print_r($_GET);
?>
<a href="?q=%E3%83%AB%E3%83%91%E3%83%B3%E4%B8%89%E4%B8%96(%233)">ルパン三世(#3)</a>

上記クリックすると「Array ( [q] => ルパン三世(#3) )」が確認できます

むりやりpostする

<?PHP
print_r($_POST);
?>
<script>
document.addEventListener('click',e=>{
  if(e.target.matches('a')){
    e.preventDefault();
    const h=e.target.getAttribute('href').split(/\/(?=[^\/]+$)/);
    const f=`<form method="post" action="${h[0]}" id="f" style="position:absolute;top:-999">
      <input name="q" value="${h[1]}">
      <input type="submit" value="send">
      </form>`;
    document.body.insertAdjacentHTML('beforeend',f);
    document.querySelector('#f').submit();
  }
});
</script>

<a href="http://example.com/episode/ルパン三世(#3)">ルパン三世(#3)</a>

Comments

[nikuatsu]

すみません、$urlはPOSTされる値なので、１つにまとまった状態を考えていました。
それでもパス部分とホスト部分などに分けてPOSTしてから、ご回答のように繋げるべきでしょうか？

[nikuatsu]

ああしかし、JavaScript側でパス部分に分けようと思っても、その時点で # の手前までしかパスとして取得できないのです。

改めて問い直すなら、例えばこちらをクリックしたときに、どのようにPOSTし、PHPでパスに分解すべきでしょうか？
<a href="http://example.com/episode/ルパン三世(#3)">ルパン三世(#3)</a>

[yambejp]

いろいろな部分で知識が足りていないのだと思います
まず、普通のHTMLではリンクをクリックしてもpostされることはありません
あえていえばgetです。urlに日本語や特殊な希望はいれられません。
またPHPでパスに分解するというのも認識がずれているとおもいます

参考データを追記しておきます

[nikuatsu]

参考データありがとうございます。そういえばパラメータにしたり、あらかじめhrefをパーセントエンコードしておくのはいいですね。

あらかじめでなくクリックした際にエンコードとPOSTするならば、以下の感じではいかがでしょうか？

まずパス内の＃のみをパーセントエンコードします。

function cnv_hash_to_percent( url ){
let arr = url.split('/');
const last = arr[arr.length-1];
arr.splice(-1,1); //
arr = arr.map((v)=>{ return v.replace(/\#/g, '%23'); });
const result = arr.join('/') + '/' + last;
return result;
}

これを使って、以下のようにPOSTする流れです。

<a href="http://example.com/episode/ルパン三世(#3)">ルパン三世(#3)</a>

$('a').click(function(e){
e.stopPropagation();
e.preventDefault();

const url = cnv_hash_to_percent( $(this).attr('href') );

$.ajax({
url: "http://example.com/ajax",
type: "POST",
data: {url}
}).done(function( res ) {
// ルパン三世(#3)にまつわるjsonがresに入っている
});

});

でPHP側で parse_url($url); をしてパスに分けて、cnv_hash_to_percentの逆をやって#に戻し、ルパン三世(#3) の文字列を得て、この文字列でSQLを流して、結果をjsonにして上記JavaScrpitのresに返す流れです。

[yambejp]

リンクとしては"ルパン三世(#3)"までを含むパスにアクセスしているのですから
httpd側のRewriteRuleが必要になってきますね
それにしても日本語を直書きするのは相当な悪手です。
aタグでパスの最後の文字列を日本語にしてどうしてもpostしたいというなら
やりようはありますが、hrefのハッシュが使えなくなるのでページ内移動ができなくなりますが
本当によいのでしょうか？

[nikuatsu]

hrefに日本語直書きは悪手なのですね。あなたがそう仰るなら即座にやめますｗ
色々な懸念のご提示ありがとうございます。

[yambejp]

無理やりバージョン書いておきましたので参考にしてください

[nikuatsu]

ありがとうございます。postする値は必要最低限の方がいいですね。それにsplitの正規表現も参考になりました。

Answer 2

フラグメント識別子

var url = 'http://example.com/episode/ルパン三世(#3)';

"#" はフラグメント識別子で予約されています。
pathname上に "#" を使うためにはパーセントエンコードしなければなりません。

console.log(new URL('http://example.com/episode/ルパン三世(%233)').pathname); // "/episode/%E3%83%AB%E3%83%91%E3%83%B3%E4%B8%89%E4%B8%96(%233)"

パーセントエンコード

またJavaScriptでも同じようにencodeURI() や encodeURIComponent()などをかけてみたのですが同じでした。

"#" をエンコードすると、URLハッシュが消失して意味が変化してしまう為、"#" をエンコードしない仕様なのでしょう。
"#" がフラグメント識別子なのか、pathnameなのか、をURL文字列から機械的に判定するのは不可能です。

期待通りにエンコードするには、pathnameとURLハッシュを別々に受け取る等、区別できるためのロジックが必要です。

Re: nikuatsu さん

Comments

[nikuatsu]

ありがとうございます。たしかに、＃をパーセントエンコードするなら質問のmy_encodeURIではダメで、パスだけに限定しなければいけませんね。