JavaScriptで文字列をエスケープするencodeURIメソッドとencodeURIComponentメソッドの使い方

JavaScriptでは、他のプログラム言語と比較してページURLを操作する場面が多いです。

そんな時、URLに日本語が含まれている場合、そのままでは取り扱うことが出来ないため、エンコード(≒エスケープ(無害化))する必要があります。

エンコードすると「あ」は「%E3%81%82」みたいな文字列になります。「 %E3%81%82 」にエンコードしないと、プログラムは日本語を扱えない場合があるからです。(使用環境により違いあり・・・)

エンコードするための関数は2つあります。

構文

メソッド意味返り値
encodeURI(文字列)文字列をエンコード
/ ? & = + : @ $ ; , #をエスケープしない
文字列
encodeURIComponent(文字列) 文字列をエンコード
/ ? & = + : @ $ ; , #もエスケープする
文字列
encodeURI() encodeURIComponent()メソッド

サンプルコード

サンプルコードとして、ツイートボタンを自作します。

ツイートボタンを自作する際、気を付ける点が1つあります。

ツイートするテキストをあらかじめエンコードしなければ、ハッシュタグに使う「#」がセキュリティ上害のある文字列として認識されます。「#」をエンコードし、エスケープする必要があります。

それでは encodeURI 及び encodeURIComponent を適用したそれぞれのコードを見てみましょう。

Output
【encodeURIComponent】
【encodeURI】
【エンコードなし】
Pug
.container.my-5
 textarea#tweetTextArea.w-100
 div 【encodeURIComponent】
  span#tweetText
 button#tweetButton ツイート
 textarea#tweetTextArea2.w-100
 div 【encodeURI】
  span#tweetText2
 button#tweetButton2 ツイート
 textarea#tweetTextArea3.w-100
 div 【エンコードなし】
  span#tweetText3
 button#tweetButton3 ツイート
SCSS
#tweetButton,
#tweetButton2,
#tweetButton3 {
	--background-color: #fff;
  --color: #576574;
	--transition: all .3s;
	margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
	border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
	transition:  var(--transition);
	&:hover {
		transition: var(--transition);
		color: var(--background-color);
		background-color: var(--color);
	}
}
JavaScript
/* テキストエリア */
document.getElementById('tweetButton').addEventListener('click', () => {
  // ツイート内容を取得
  let tweetText = document.getElementById('tweetTextArea').value;
  // 半角スペースと #IDEA HACKをツイート文言に追加する
  tweetText += ' #IDEA HACK';
  // エンコードする
  const encodedText = encodeURIComponent(tweetText);
  // ツイート用リンクを作成する
  const tweetURL =
    `https://twitter.com/intent/tweet?text=${encodedText}`;
  // ツイート用リンクを開く
  window.open(tweetURL);
});
//テキストを入力する度にonKeyUp()を実行
document.getElementById('tweetTextArea').addEventListener( 'keyup', () => {
	let tweetTextArea = document.getElementById('tweetTextArea').value;
	tweetTextArea += ' #IDEA HACK';
	tweetText.textContent = encodeURIComponent(tweetTextArea);
});



document.getElementById('tweetButton2').addEventListener('click', () => {
  // ツイート内容を取得
  let tweetText = document.getElementById('tweetTextArea2').value;
  // 半角スペースと #IDEA HACKをツイート文言に追加する
  tweetText += ' #IDEA HACK';
  // エンコードする
  const encodedText = encodeURI(tweetText);
  // ツイート用リンクを作成する
  const tweetURL =
    `https://twitter.com/intent/tweet?text=${encodedText}`;
  // ツイート用リンクを開く
  window.open(tweetURL);
});

//テキストを入力居する度にonKeyUp()を実行
document.getElementById('tweetTextArea2').addEventListener( 'keyup', () => {
	let tweetTextArea2 = document.getElementById('tweetTextArea2').value;
	tweetTextArea2 += ' #IDEA HACK';
	tweetText2.textContent = encodeURI(tweetTextArea2);
});


document.getElementById('tweetButton3').addEventListener('click', () => {
  // ツイート内容を取得
  let tweetText = document.getElementById('tweetTextArea3').value;
  // 半角スペースと #IDEA HACKをツイート文言に追加する
  tweetText += ' #IDEA HACK';
  // エンコードする
  const encodedText = tweetText;
  // ツイート用リンクを作成する
  const tweetURL =
    `https://twitter.com/intent/tweet?text=${encodedText}`;
  // ツイート用リンクを開く
  window.open(tweetURL);
});

//テキストを入力居する度にonKeyUp()を実行
document.getElementById('tweetTextArea3').addEventListener( 'keyup', () => {
	let tweetTextArea3 = document.getElementById('tweetTextArea3').value;
	tweetTextArea3 += ' #IDEA HACK';
	tweetText3.textContent = tweetTextArea3;
});

いずれのコードを利用しても、ページの末尾に「#IDEA HACK」が付くようにしています。

それぞれツイートボタンを押すと、encodeURIComponent()しかハッシュタグが反映されないのが分かります。エンコード無しで送信したり、 encodeURI で「#」をエスケープせず送信すると、「#」はセキュリティ上害のある文字列として扱われるからです。

インストラクター
コメント

コメントを残す