jQuery:text()とhtml()の違いは何ですか?


回答:


347

その違いはほぼ一目瞭然だと思います。そして、テストするのは非常に簡単です。

jQuery.html()文字列をHTMLとしてjQuery.text()扱い、コンテンツをテキストとして扱います

<html>
<head>
  <title>Test Page</title>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
      $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
    });
  </script>
</head>

<body>

<div id="div1"></div>
<div id="div2"></div>

</body>
</html>

それほど明白ではない可能性のある違いは、jQuery APIドキュメントで説明されています

.html()のドキュメントでは:

この.html()メソッドはXMLドキュメントでは使用できません。

そして.text()のドキュメントでは:

.html()メソッドとは異なり、.text()XMLドキュメントとHTMLドキュメントの両方で使用できます。

$(function() {
  $("#div1").html('<a href="example.html">Link</a><b>hello</b>');
  $("#div2").text('<a href="example.html">Link</a><b>hello</b>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="div1"></div>
<div id="div2"></div>
http://jsfiddle.net/hossain/sUTVg/の ライブデモ


また、長さも2つで異なることに注意してください。jsfiddle.net/sUTVg/458
GreeKatrina

5
@aequalsbこれは古い質問であることを認識していますが、テキストがHTMLとして扱われるため、デフォルトで´.html() ´を使用するのは危険であることに注意する必要があります。クエリ文字列パラメーター、フォーム、ヘッダー、URL、またはテキストを提供または編集できる人以外の場所からそのテキストを取得する場合、XSSは広く利用できます。
カニス、2017年

105

((必要に応じて更新してください。この回答はWikiです))

サブ質問:テキストのみ、何より高速で、.text()または.html()

回答: .html()より速いです!すべての質問については、「動作テストキット」をご覧ください

したがって、結論として、「テキストのみ」がある場合は、html()メソッドを使用します。

注:意味がありませんか?.html()関数はのラッパーにすぎないことを覚えておいてください.innerHTML。ただし、.text()関数jQueryでは「エンティティフィルター」が追加され、このフィルターは当然時間を消費します。


OK、本当にパフォーマンスが必要な場合 ... プロパティによる直接のテキスト置換にアクセスするには、純粋なJavascript使用してくださいnodeValue。ベンチマークの結論:

  • jQueryはの.html()2倍高速です.text()
  • 純粋なJS .innerHTMLはの3倍高速です.html()
  • 純粋なJS ' .nodeValue.html()、の最大50 .text()倍、の最大100 倍、の最大20倍です.innerHTML

PS:.textContentプロパティはDOM-Level-3で導入され、DOM .nodeValue-Level-2で高速です(!)。

この完全なベンチマークを参照してください:

// Using jQuery:
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").html('BENCHMARK WORK');
var ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    $("#work").text('BENCHMARK WORK');
alert("JQuery (3000x): \nhtml="+ht+"\ntext="+simplecron.duration());

// Using pure JavaScript only:
simplecron.restart(); for (var i=1; i<3000; i++)
    document.getElementById('work').innerHTML = 'BENCHMARK WORK';
ht = simplecron.duration();
simplecron.restart(); for (var i=1; i<3000; i++) 
    document.getElementById('work').nodeValue = 'BENCHMARK WORK';
alert("Pure JS (3000x):\ninnerHTML="+ht+"\nnodeValue="+simplecron.duration());

7
しかし、信頼できない入力を扱う場合は、可能な限りtext()を使用する必要があります。
Scott Simontis

@ScottSimontisは、nodeValueプロパティを設定すると、 ">"を "&lt;"に変換します。など
Peter Krauss

Chrome DevTools(developer.chrome.com/devtools/docs/timeline)で「ベンチマーク」すると、結果は逆になります(の.text()約7倍速いようです.html())。ソースコード:codepen.io/damhonglinh/pen/vGpQEO。私は1500要素でテストしました。.html()〜220msかかり、〜30ms .text()かかった。
Linh Dam

こんにちは@LinhDam。うーん... 完全なベンチマークを使用して、私のFirefoxは「JQ TIMES(3000x):html = 82 text = 254」、「JS TIMES(3000x):html = 15 text = 4」...そして私のChromeは「JQ TIMES(3000x):html = 82 text = 202 "、" JS TIMES(3000x):html = 16 text = 0 "....したがって、両方(FirefoxとChrome)は同じ時間比率になります。
Peter Krauss

)テキスト()とhtml(間の実ベンチマークするセレクタは行われるべきか、getElementByIdを、またはすべてのケースで$(「#ワーク」)か、getElementByIdを対も$(「#ワーク」)をベンチマークします
Octavioamu

66

最初の例は実際にHTMLをに埋め込みますdivが、2番目の例は、要素関連の文字を対応する文字エンティティに置き換えることでテキストをエスケープし、文字どおりに表示します(つまり、HTMLはレンダリングされずに表示されます)。


1
すみません、よくわかりません。さらに説明してもらえますか?ありがとう
Brettk

2番目の例が「エンコードする」とはどういう意味ですか?すでにエンコードされていますか?
Brettk 2009

@Brettk-私は「エンコード」と言いましたが、それは指のずれです。私は自分の意味をよりよく反映するように答えを変えました。
Andrew Hare、

6
彼は、.text()関数では、すべて<がに置き換えられることを意味し&lt;ます。したがって.html()、ブラウザではリンクといくつかの太字のテキスト.text()が表示され、ブラウザではすべてがテキストとして表示され、リンクや太字のテキストは作成されません。
Mottie、

59

このtext()メソッドは、渡されたHTMLをエンティティエスケープします。使用するtext()ページを表示するユーザーに表示されるHTMLコードを挿入場合にします。

技術的には、2番目の例では以下が生成されます。

&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;b&gt;hello&lt;/b&gt;

これはブラウザで次のようにレンダリングされます。

<a href="example.html">Link</a><b>hello</b>

最初の例は、実際のリンクといくつかの太字のテキストとしてレンダリングされます。


4
これは、実際に何が起こっているのかを説明するために、選択した回答に含まれているはずです。
d512 2013

27

実際にはどちらも多少似ていますが、まったく異なります。これは、使用方法や目的によって異なります。

使用する場所:

  • 使用する .html()html要素を持つコンテナを操作するためにします。
  • .text()通常は別個の開始タグと終了タグを持つ要素のテキストを変更するために使用します

使用しない場所:

  • .text() メソッドはフォーム入力またはスクリプトでは使用できません。

    • .val() inputまたはtextarea要素の場合。
    • .html() スクリプト要素の値。
  • からhtmlコンテンツを取得.text()すると、htmlタグがhtmlエンティティに変換されます。

差:

  • .text() XML文書とHTML文書の両方で使用できます。
  • .html() htmlドキュメント専用です。

jsfiddleでこの例を確認して、アクションの違いを確認してください


1
この答えは、最も理解しやすく、最も適切にフォーマットされた+1でした
Katie

差分bwとは何ですか:: html(data); &val(data); @Owais Qureshi
Gem

9

誰がのクロスサイトスクリプティング予防給付言及していないという奇妙な.text()オーバーを.html()他の人がちょうどあることを言及しているが(.text()データをエスケープ)。

.text()ユーザーに表示するための単なるデータ/テキストであるDOMのデータを更新する場合は、常に使用することをお勧めします。

.html() 主に、div内のHTMLコンテンツを取得するために使用する必要があります。


5

値を単純なテキストとして表示する場合は、.text(…)を使用します。

値をhtml形式のテキスト(またはHTMLコンテンツ)として表示する場合は、.html(…)を使用します。

テキスト(たとえば、入力コントロールからのテキスト)に、HTMLで特別な意味を持つ文字/タグが含まれていないことが不明な場合は、必ず.text(...)を使用してください。テキストが正しく表示されない可能性があるため、これは非常に重要ですが、不要なJSスクリプトスニペット(たとえば、別のユーザー入力からのもの)がアクティブになる可能性もあります。




2

まあ簡単に言えば。

html()-内部のhtml(htmlタグとテキスト)を取得します。

text()-内部に存在する場合にテキストのみを取得するには(テキストのみ)


1

異なる点は.html()、HTMLとして評価すること.text()と、テキストとして評価することです。
HTML HTMLのブロックを考えてみましょう

<div id="mydiv">
<div class="mydiv">
    This is a div container
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
    </ul>
    a text after ul
</div>
</div>

JS

var out1 = $('#mydiv').html();
var out2 = $('#mydiv').text();
console.log(out1) // This output all the html tag
console.log(out2) // This is output just the text 'This is a div container Link 1 Link 2 a text after ul'

図はこのリンクからのものですhttp://api.jquery.com/text/


1

.text()HTMLタグの間に実際のテキストが表示されます。たとえば、pタグ間の段落テキスト。興味深いのは、$セレクターを使用してターゲットにしている要素のすべてのテキストと、選択した要素の子要素のすべてのテキストが表示されることです。あなたは複数持っているので、もしpbody要素内のテキストにタグをし、あなたが$(body).text()、あなたが取得するすべてのすべての段落からテキストを。(テキストのみ。pタグ。)

.html()テキストタグが表示されます。したがって、$(body).html()基本的にはページ全体のHTMLページが表示されます

.val()valueなどの属性を持つ要素に対して機能しますinputinput含まれるテキストまたはHTMLを持っていないため、.text().html()の両方になりますnullためinputの要素。


0

違いはtext()あなたにhtmlタグを挿入することだと思いますhtmlタグは機能しません

$('#output').html('You are registered'+'<br>'  +'  '
                     + 'Mister'+'  ' + name+'   ' + sourname ); }

出力:

You are registered <br> Mister name sourname

交換text()html()

出力

You are registered
Mister name sourname 

その後、タグは<br>動作しますhtml()


1
答えを修正してくださいtext()。最初のスニペットではを使用する必要があります。
MKaama 2017

0

テキスト関数は値をプレーンテキストとして設定または取得します。それ以外の場合は、HTML関数が値をHTMLタグとして設定または取得して、それを変更または変更します。コンテンツだけを変更したい場合は、text()を使用してください。ただし、マークアップを変更する必要がある場合は、hmtl()を使用する必要があります。

6年後の私にとってはダミーの回答です。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.