2017-04-11

tobijibu

JavaScriptでHTMLエスケープ処理を作る

前回、VimScriptでHTML処理を作りました。

今回はJavaScriptで同様の処理を作成してみました。 Vimで出来るようになったので作成しなくても良かったのですが、練習がてら挑戦してみました。

上のテキストエリアに変換対象の文字を入れて「変換」ボタンを押すと、 下のテキストエリアに変換後の文字が出力されます。



変換

HTML

テキストエリア2つと、ボタンを1つ用意します。

テキストエリアには、それぞれnoescape、escapeというidを付与します。

ボタンはescというidを付与します。どんな要素でも良いのですが、今回はinputを使っています。

<textarea id="noescape" rows="20" cols="60"></textarea>
<textarea id="escape" rows="20" cols="60"></textarea>
<input type="button" id="esc" value="変換">

変換対象文字の設定

コンストラクタ内でJavaScriptで変換対象の文字を指定します。 VimScriptの時と同様、&には"否定先読み"を使います。JavaScriptでは(?!～)という形で指定します。

this.replaceEntity = [
  ['(&(?!#*\\w+;)|&amp;|&#38;)', '&#x26;'], // アンパサンド
  ['(\\"|&quot;|&#34;)',         '&#x22;'], // ダブルクォーテーション
  ['(\\\'|&#39;)',               '&#x27;'], // クォーテーション
  ['(<|&lt;|&#60;)',             '&#x3C;'], // 小なり
  ['(>|&gt;|&#62;)',             '&#x3E;'], // 大なり
];

イベント追加

ボタンにイベントを追加します。

変換対象文字指定と同じように、コンストラクタ内で指定します。

this.bindEvent('esc');

そして、bindEventでは、addEventListenerを使ってイベントを指定します。

bindEvent(id) {
  document.getElementById(id).addEventListener('click', this.htmlEscape, false);
}

変換処理

ようやく文字の変換処理です。

変換は単純に#noescapeのテキストエリア内のデータを取得し、変換処理した結果を#escapeに代入するという方法です。 変換処理はぐちゃぐちゃで使った処理を流用しました。

replaceHexSpChar(string) {
  let regExp = new Object();
  for (const k of Object.keys(this.replaceEntity)) {
    regExp = new RegExp(this.replaceEntity[k][0], 'ig');
    string = string.replace(regExp, this.replaceEntity[k][1]);
  }
  return string;
}

最後にtextReplace()呼び出せば完了です。

let rep = new textReplace();

今回説明で利用したソースはこちらにあります。