読者です 読者をやめる 読者になる 読者になる
無料で使えるシステムトレードフレームワーク「Jiji」 をリリースしました!

・OANDA Trade APIを利用した、オープンソースのシステムトレードフレームワークです。
・自分だけの取引アルゴリズムで、誰でも、いますぐ、かんたんに、自動取引を開始できます。

html()とtext()

JavaScript jQuery

jQuery特定の要素の中身を編集するには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> &lt;b&gt;aaa&lt;/b&gt;
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>

実行結果はこちら