Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:47.

HTMLタグ関連記号を、文字実体参照に変換する

ユーザからの入力を受け付けるフォームを作ったとき、ユーザの入力内容を確認等の目的で画面に表示したいことがあります。 ユーザがHTMLタグなどを含めて入力しているとき、それをそのまま画面に表示してしまうと困ったことになる可能性があります。 太字にするとかその程度のタグであれば悪影響はないかも知れませんが、input要素を閉じてしまうようなHTMLタグが入力されていると、うまくデータが次に渡らなくなってしまう可能性があります。また、セキュリティ面でも問題になるかも知れません。

というわけで、ユーザが入力した内容を画面に表示する前に、HTMLタグに関係する記号を実体参照に変換し、HTMLタグを(タグとしてではなく)そのまま文字列として画面に表示するようにしておくと良いでしょう。
正規表現を使うと、文字列中の記号をすべて一括して置換できます。

正規表現を使って、HTMLタグ関連記号を文字実体参照に変換する

変数TargetStringに格納されている文字列に対して、「&」記号を「&amp;」に、「"」記号を「&quot;」に、「<」記号を「&lt;」に、「>」記号を「&gt;」にそれぞれ置き換えるには、以下のように記述します。

TargetString = TargetString.replace( /&/g , "&amp;" );
TargetString = TargetString.replace( /"/g , "&quot;" );
TargetString = TargetString.replace( /</g , "&lt;" );
TargetString = TargetString.replace( />/g , "&gt;" );

文字列を格納した変数のreplaceメソッドを呼び出して、第1引数に「置換対象の文字」を正規表現で記述し、第2引数に「置換後の文字列」を渡せば良いだけです。 正規表現の最後にグローバル修飾子「g」を記述しているので、対象文字列の中に記号が何個あっても、すべてが変換されます。(この「g」を省略すると、最初に見つかった1つだけしか変換されないので注意して下さい。)

なお、「&」記号の変換を最初にしないと、それ以降の(文字実体参照への変換処理で加わった)「&」記号を二重に変換してしまうので注意して下さい。(^_^;)

対象文字列:

上記のサンプルでは、ボタンをクリックすると入力された文字列内に含まれるHTMLタグ関連の記号が文字実体参照に変わります。(入力欄の内容を自由に書き換えて試せます。)

replaceメソッドを呼ぶ回数を1回にする

先の例では、replaceメソッドを4回呼び出すことになります。それだと効率が悪いので、例えば以下のように記述すると、replaceメソッドの実行回数が1回で済むというご意見をイニチェさんから頂きました。どうもありがとうございます!

var sanitize = function(str)
{
   var character = {
      '&' : '&amp;',
      '<' : '&lt;' ,
      '>' : '&gt;' ,
      '"': '&quot;'
   };

   return str.replace(/[&<>"]/g, function(chr) {
      return character[chr];
   });
};

ユーザが入力した文字列を、一旦画面に表示しなければならない場面はわりとあると思います。 何か文字列を出力する前に、これらの変換を一括で行っておくような汎用関数を作っておくと良いのではないでしょうか。

なお、JavaScriptで正規表現を使う方法は、「JavaScriptで正規表現を使う」で解説しています。
また、JavaScriptで正規表現を使って文字列を置き換える方法は、「正規表現を使って文字列を置換する方法」で解説しています。
それらも併せてご参照下さい。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど