JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

// 検索をクリック
$('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;

	// 元に戻す
	const ttl = my_decodeURI(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;
}

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

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

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

	return result;
}