js STUDIO

.text()

要素のテキストを設定、または設定されているテキストを取得します。

.html()とは違い、このメソッドはXMLドキュメントでも使用可能です。 Form要素には使用できません。.val()や.html()を使用してください。 jQuery1.4からは、CDATAノードのテキストも取得できるようになりました。

.text() 1.0追加

戻り値:String

マッチした各要素の子孫要素も対象として、連結した要素内のテキストを取得します。 ブラウザ毎のHTMLパーサの違いによって空白、改行で違いがある可能性があります。 例えば、次のようなコードがあった場合に、$('div.demo-container').text()と 実行すると、 

<div class="demo-container">
  <div class="demo-box">デモ</div>
  <ul>
    <li>リスト 項目 1</li>
    <li>リスト <strong>項目</strong> 2</li>
  </ul>
</div>

「デモ リスト 項目 1 リスト 項目 2」の文字列を取得します。

.text(textString) 1.0追加

戻り値:jQuery

マッチした要素に、指定したHTMLをセットします。

引数 説明
textString マッチした要素内に挿入するテキスト文字列を指定します。

.text( function(index, text) ) 1.4追加

戻り値:jQuery

マッチした要素に、指定したHTMLをセットします。

引数 説明
function(index, text) マッチした要素内に挿入するテキスト文字列を返す関数を指定します。
index
マッチした要素のインデクッス番号
text
変更前のテキスト文字列

各LI要素内に、1から始まるインデックス番号のテキストを出力します。

$('ul li').text(function(index) {
  return '番号：' + (index + 1);
});

注意事項

テキストのセットを行う場合、このメソッドが必要に応じて文字列をエスケープ処理していることに注意してください。 これはDOMメソッドの.createTextNode()を使用しているためであり、例えば&lt;は<に自動的に変換されます。 例えば次のようなコードがあった場合に、「$('div.demo-container').text('<p>これはテストです。</p>'); 」と実行すると、 

<div class="demo-container">
  <div class="demo-box">デモ</div>
  <ul>
    <li>リスト 項目 1</li>
    <li>リスト <strong>項目</strong> 2</li>
  </ul>
</div>

HTML上での出力結果は次のようになります。

<div class="demo-container">
&lt;p&gt;これはテストです。&lt;/p&gt;
</div>

デモ

1つ目のP要素のテキストを取得し、最後のP要素内に挿入しています。 Bold要素が取り除かれていることに注目してください。 

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:blue; margin:8px; }
  b { color:red; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p><b>テスト</b> 要素</p>
<p></p>
<script>
  var str = $("p:first").text();
  $("p:last").html(str);
</script>
</body>
</html>

P要素にテキストをセットします。タグがエスケープされている事に注目してください。

<!DOCTYPE html>
<html>
<head>
<style>
  p { color:blue; margin:8px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>テスト要素</p>
<script>$("p").text("<b>新しい</b>テキスト");</script>
</body>
</html>

 Back to top

© 2010 - 2017 STUDIO KINGDOM