new URL が勝手に変換する値をすべて知りたいです

Question

発生している問題

「cat dog」の入力値で検索したときに、URLが「 http://example.com/search?q=cat+dog 」と勝手に変換されるのはいいのですが、しかしページタイトルまで<h1>cat+dogの検索結果です</h1>となってしまいます。

実現したいこと

ページタイトルを<h1>cat dogの検索結果です</h1>のように、「cat dog」という入力値に戻したいです。

該当のソースコード

<input placeholder="検索ワードを入力してください" value="cat dog　bird + giraffe">
<button>検索</button>
<h1>ページタイトル</h1>

// 検索をクリック
$('button').click(function() {
	// URLを変更
	const inpVal = $('input').val();
	let url = setParams( location.href , {q:inpVal} );
	history.pushState( null, '', url );

	// タイトルを変更
	setTtl( url );
});

// タイトルを変更
function setTtl( url ){
	const inp = getParams(url).q || '';

	// これでは「+」や「%2B」など不要な記号がタイトルに入ってしまう
	const ttl = inp;

	$('h1').text(ttl+'の検索結果です');
}

// パラメータをセット
function setParams( url, param ){

	let result = url;
	const obj = new URL(url);
	const params = obj.searchParams;

	Object.keys(param).forEach((k,i)=>{
		const v = param[k].replace(/\s+/g, ' ');
		params.set(k, v);
	});

	return obj.toString();
}

// パラメータを取得
function getParams( url = location.href ){
	let result = {};
	const obj = new URL( url );
  
	if( obj.search ){
		const arr = obj.search.substr(1).split('&');
		let key = null;
		for(var i = 0 ; i < arr.length ; i++){		
			key = arr[i].split("=");
			result[key[0]] = key[1];
		}
	}
  
	return result;
}

試したこと

「+」などがdecodeURIで元に戻せないのが厄介なところです。
そこで自前の関数my_decodURIを作り、次のように実装しました。

// 元に戻す
function my_decodeURI( url ){
	let result = url;

	// "+" -> 半角スペース
	result = result.replace(/\+/g, ' '); 

	// "%2B" -> "+"
	result = result.replace(/%2B/g, '+'); 

	return result;
}

// タイトルを変更
function setTtl( url ){
	const inp = getParams(url).q || '';

	// これでは「+」や「%2B」など不要な記号がタイトルに入ってしまう
	// const ttl = inp;

	// 元に戻す
	const ttl = my_decodeURI(inp);

	$('h1').text(ttl+'の検索結果です');
}

この結果がこちらで、実現したいページタイトルとなりました。
https://jsfiddle.net/f2jmk1Lt/

しかしmy_decodeURIは２つの記号にしか対応できていません。

他に勝手に変換される値があるかもしれないのでそれらにも対処できるように修正したいのですが、どのようにしたらよろしいでしょうか？

尚、MDNにも何がどう変換されるのか一覧がなく、分からない状況です。

条件

条件がございます。setTtl()にinpValは渡せません。あくまで変換されたURLを用いてページタイトルをセットしたいです。（上記は質問用に簡易なコードにしていますが、実際には関数が入り組んでいるためです。）

Comments

[Lhankor_Mhy]

「いろは」などのマルチバイト文字は捨てるのですか？

[nikuatsu]

「いろな」が入力値ならそのまま「いろは」と取得したいです。

[Lhankor_Mhy]

では、+ の問題ではなくて、パーセントエンコーディング全体の問題では？

[nikuatsu]

すみません、「全体の問題」の意味するところがよくわかりません。
例えば次の３つは最後の「%20」だけデコードできますが、「+」や「%2B」はできません。この２つは「全体の問題」には含まれますか？含まれるのでしたら質問したいのは「全体の問題」だと思います。これら２つも元に戻したのです。
console.log( decodeURI('http://example.com/search?q=cat+dog') );
console.log( decodeURI('http://example.com/search?q=cat%2Bdog') );
console.log( decodeURI('http://example.com/search?q=cat%20dog') );

Answer 1

	if( obj.search ){
		const arr = obj.search.substr(1).split('&');

ここで obj.searchParams を参照して URLSearchParams インターフェイスを利用しましょう。適切にデコードしてくれます。

Comments

[nikuatsu]

ありがとうございます。MDN拝見しましたが、こういうことでしょうか？

// パラメータを取得
function getParams( url = location.href ){
let result = {};
const obj = new URL( url );

if( obj.search ){
const arr = obj.searchParams;
for (const [key, value] of arr.entries()) {
result[key] = value;
}
}

return result;
}

[int32_t]

そんな感じで大丈夫だと思います。

obj.searchParams をそのまま return して、利用側では getParams(...).get('q') でもよいですね。

[nikuatsu]

ご返信ありがとうございます。なるほど。何をしているのかわかりやすいですね。