Javascript (Node.js)で文字列エスケープ

目的

• Node.jsで実装をしていて、改行文字がエスケープされていたが、どうやって戻せば良いか分からなかったので調べてまとめる

Javascriptの文字列のエスケープ

Javascriptでは文字列の加工が2種類ある気がする

• エスケープ：改行などの特殊文字を見える形に加工する（=> \n）
• 無害化（サニタイジング）：HTMLやJSONオブジェクトを解釈・実行させずに渡せるよう加工する

Javascriptでエスケープ、サニタイズに使われる関数

• encodeURIComponent
  • 変換対象が少ないencodeURIもある
• JSON.stringify
  • JSONとついているが、オブジェクト型じゃなくても使える
  • 改行文字のバックスラッシュエスケープが行われる
• escape
  • 非推奨
• toString(‘Base64’)

検証

エンコードする対象の文字列は以下の4つ

• JSONで解釈される記号

”  /

• URLで使わないほうが良い記号

: ? # / ? @ % ! ( ) [ ] & ’ * + , ; =

• HTML解釈される記号

< > & © ® ™ ” ’ ¥

• 英語以外の文字

abc123あいうЁЂЃ

結果

そのまま出力

const str1 = `"\/\b\f\n\r\t`;
const str2 = `:?#/?@%!()[]&'*+,;=`;
const str3 = `<> &©® ™"'¥`;
const str4 = `abc123あいうЁЂЃ`;

console.log(str1);
console.log(str2);
console.log(str3);
console.log(str4);

出力結果

"/


:?#/?@%!()[]&'*+,;=
<> &©® ™"'¥
abc123あいうЁЂЃ

encodeURIComponent

const str1 = `"\/\b\f\n\r\t`;
const str2 = `:?#/?@%!()[]&'*+,;=`;
const str3 = `<> &©® ™"'¥`;
const str4 = `abc123あいうЁЂЃ`;

console.log(encodeURIComponent(str1));
console.log(encodeURIComponent(str2));
console.log(encodeURIComponent(str3));
console.log(encodeURIComponent(str4));

出力結果

%22%2F%08%0C%0A%0D%09
%3A%3F%23%2F%3F%40%25!()%5B%5D%26'*%2B%2C%3B%3D
%3C%3E%20%26%C2%A9%C2%AE%20%E2%84%A2%22'%C2%A5
abc123%E3%81%82%E3%81%84%E3%81%86%D0%81%D0%82%D0%83

escape

const str1 = `"\/\b\f\n\r\t`;
const str2 = `:?#/?@%!()[]&'*+,;=`;
const str3 = `<> &©® ™"'¥`;
const str4 = `abc123あいうЁЂЃ`;

console.log(escape(str1));
console.log(escape(str2));
console.log(escape(str3));
console.log(escape(str4));

出力結果

%22/%08%0C%0A%0D%09
%3A%3F%23/%3F@%25%21%28%29%5B%5D%26%27*+%2C%3B%3D
%3C%3E%20%26%A9%AE%20%u2122%22%27%A5
abc123%u3042%u3044%u3046%u0401%u0402%u0403

JSON.stringify

const str1 = `"\/\b\f\n\r\t`;
const str2 = `:?#/?@%!()[]&'*+,;=`;
const str3 = `<> &©® ™"'¥`;
const str4 = `abc123あいうЁЂЃ`;

console.log(JSON.stringify(str1));
console.log(JSON.stringify(str2));
console.log(JSON.stringify(str3));
console.log(JSON.stringify(str4));

出力結果

"\"/\b\f\n\r\t"
":?#/?@%!()[]&'*+,;="
"<> &©® ™\"'¥"
"abc123あいうЁЂЃ"

Base64

const str1 = `"\/\b\f\n\r\t`;
const str2 = `:?#/?@%!()[]&'*+,;=`;
const str3 = `<> &©® ™"'¥`;
const str4 = `abc123あいうЁЂЃ`;

console.log(Buffer.from(str1).toString('base64'));
console.log(Buffer.from(str2).toString('base64'));
console.log(Buffer.from(str3).toString('base64'));
console.log(Buffer.from(str4).toString('base64'));

出力結果

Ii8IDAoNCQ==
Oj8jLz9AJSEoKVtdJicqKyw7PQ==
PD4gJsKpwq4g4oSiIifCpQ==
YWJjMTIz44GC44GE44GG0IHQgtCD

デコード

それぞれの関数に対応するデコード関数は以下