html()とtext() - うなの日記

jQueryで特定の要素の中身を編集するにはhtml(val) または text(val) を使用します。

html(val) は指定された文字列を、サニタイズなしでそのままコンテンツとします。
text(val) の方は、文字列をサニタイズして設定します。

また、要素の中身を参照するメソッドとしてhtml(),text() がそれぞれ用意されており、

html()は要素を含む配下全体を文字列として返します。
text() は配下の文字列だけを返却します。
- また、ここで、文字列中にサニタイズされた箇所があれば元に戻して返却するという処理もします。
- なので
  - text(str)で設定した文字をtext()で取り出すと、元々の文字列が取得できますが、
  - text(str)で設定した文字をhtml()で取り出すと、元々の文字列がサニタイズされた状態で返されます。

例えば「<b>aaa</b>」を以下の組み合わせで設定/取得した場合、それぞれ以下の文字列が返されてきます。

↓取出,設定→	html(str)	text(str)
html()	<b>aaa</b>	<b>aaa</b>
text()	aaa	<b>aaa</b>

動作確認用のサンプルは以下。

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="./jquery-1.3.2.js"></script>
  <script type="text/javascript">
    $(function(){

      // html()で設定 / タグはサニタイズされない。
      $("#text1").html("html: <b>aaa</b>");
      // text()で設定 / タグはサニタイズされる。
      $("#text2").text("text: <b>aaa</b>");

      // 取り出す場合はどちらもサニタイズ前の値が返される
      alert("html → html : " + $("#text1").html() ); // "html: <b>aaa</b>"
      alert("text → html : " + $("#text2").html() ); // サニタイズされた値が返される
      alert("html → text : " + $("#text1").text() ); // タグを除いたコンテンツとなる文字列が返される。
      alert("text → text : " + $("#text2").text() ); // "text: <b>aaa</b>"

      // text()で代入してhtmlで取り出す、を繰り返すと2重3重にサニタイズされるので注意
      $("#text3").text("<b>aaaa</b>");
      $("#text3").text($("#text3").html());
    });
  </script>
</head>
<body>
  <div id="text1"></div>
  <div id="text2"></div>
  <div id="text3"></div>
</body>
</html>

実行結果はこちら