Quelle est la différence entre jQuery: text () et html ()?

Réponses:

347

Je pense que la différence va presque de soi. Et c'est super trivial à tester.

jQuery.html()traite la chaîne comme du HTML, jQuery.text()traite le contenu comme du texte

<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>

Une différence qui n'est peut-être pas aussi évidente est décrite dans la documentation de l'API jQuery

Dans la documentation de .html () :

le .html() méthode n'est pas disponible dans les documents XML.

Et dans la documentation de .text () :

Contrairement à la .html()méthode, .text()peut être utilisé dans les documents XML et 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>
Développer l'extrait
Démo en direct sur http://jsfiddle.net/hossain/sUTVg/

Peter Bailey
la source
Il convient également de noter que la longueur est également différente entre les deux. jsfiddle.net/sUTVg/458
GreeKatrina
5
@aequalsb Je reconnais que c'est une vieille question maintenant, mais je dois remarquer que le défaut d'utiliser ´.html () ´ est dangereux à cause du texte traité comme HTML. Si vous obtenez ce texte à partir d'un paramètre de chaîne de requête, d'un formulaire, d'un en-tête, de l'URL ou de tout autre endroit que quelqu'un d'autre que vous pouvez fournir ou modifier le texte, alors vous êtes grand ouvert pour XSS.
Canis
105

((veuillez mettre à jour si nécessaire, cette réponse est un wiki))

Sous-question: quand seulement du texte, qu'est-ce qui est plus rapide, .text()ou .html()?

Réponse: .html() c'est plus rapide! Voir ici un "kit de test de comportement" pour toute la question .

Donc, en conclusion, si vous n'avez "qu'un texte", utilisez la html()méthode.

Remarque: cela n'a pas de sens? N'oubliez pas que la .html()fonction n'est qu'un wrapper .innerHTML, mais dans la .text()fonction jQuery ajoute un "filtre d'entité" , et ce filtre consomme naturellement du temps.

Ok, si vous voulez vraiment des performances ... Utilisez du Javascript pur pour accéder directement au remplacement de texte par la nodeValuepropriété. Conclusions de référence:

  • jQuery .html()est ~ 2x plus rapide que.text() .
  • JS pur .innerHTMLest ~ 3 fois plus rapide que.html() .
  • JS pur ' .nodeValueest ~ 50x plus rapide que .html(), ~ 100x que .text()et ~ 20x que .innerHTML.

PS: la .textContentpropriété a été introduite avec DOM-Level-3, .nodeValueest DOM-Level-2 et est plus rapide (!).

Voir cette référence complète :

// 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());
Peter Krauss
la source
7
Mais si vous avez affaire à une entrée non fiable, vous devez utiliser text () autant que possible.
Scott Simontis
@ScottSimontis lorsque vous définissez une nodeValuepropriété, elle transforme ">" en "& lt;", etc.
Peter Krauss
Lorsque je "compare" avec Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), le résultat est inverse ( .text()semble ~ 7 fois plus rapide que .html()). Code source: codepen.io/damhonglinh/pen/vGpQEO . J'ai testé avec 1500 éléments; .html()a pris ~ 220 ms et a .text()pris ~ 30 ms.
Linh Dam
Salut @LinhDam. Hum ... en utilisant le benchmark complet , mon Firefox dit "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... Et mon Chrome dit "JQ FOIS (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... donc les deux (Firefox et Chrome) ont les mêmes rapports de temps .
Peter Krauss
pour être une véritable référence entre text () et html (), le sélecteur doit être fait ou getElementById ou $ ("# work") dans tous les cas ou vous pourrez également comparer le $ ("# work") vs getElementById
Octavioamu
66

Le premier exemple incorporera en fait du HTML dans le divtandis que le second exemple échappera au texte en remplaçant les caractères liés aux éléments par leurs entités de caractères correspondantes afin qu'il s'affiche littéralement (c'est-à-dire que le HTML sera affiché non rendu).

Andrew Hare
la source
1
Désolé, je ne comprends pas très bien. Pourriez-vous expliquer davantage. Merci
Brettk
Que voulez-vous dire que le 2ème exemple "encodera"? C'est déjà de l'encodage, non?
Brettk
@Brettk - J'ai dit "encoder" mais c'était plus un glissement des doigts. J'ai changé ma réponse pour mieux refléter ce que je veux dire.
Andrew Hare
6
Il signifie que dans la .text()fonction, tout <sera remplacé par &lt;. Ainsi, avec .html()le navigateur, vous verrez un lien et du texte en gras, .text()le navigateur verra tout sous forme de texte et ne fera pas de lien ou de texte en gras.
Mottie
59

La text()méthode entité-échappe à tout code HTML qui lui est transmis. Utilisationtext() lorsque vous souhaitez insérer du code HTML qui sera visible par les personnes qui consultent la page.

Techniquement, votre deuxième exemple produit:

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

qui serait rendu dans le navigateur comme:

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

Votre premier exemple sera rendu sous forme de lien réel et de texte en gras.

davidcl
la source
4
Cela aurait dû être inclus dans la réponse sélectionnée pour expliquer ce qui se passe réellement.
d512
27

En fait, les deux semblent quelque peu similaires, mais sont assez différents, cela dépend de votre utilisation ou de l'intention que vous souhaitez atteindre,

Où utiliser:

  • utiliser .html()pour opérer sur des conteneurs ayant des éléments html.
  • utiliser .text()pour modifier le texte des éléments ayant généralement des balises d'ouverture et de fermeture distinctes

Où ne pas utiliser:

  • .text() La méthode ne peut pas être utilisée sur des entrées de formulaire ou des scripts.

    • .val() pour les éléments d'entrée ou de zone de texte.
    • .html() pour la valeur d'un élément de script.

  • Récupérer du contenu HTML .text()convertira les balises HTML en entités HTML.

Différence:

  • .text() peut être utilisé dans les documents XML et HTML.
  • .html() est uniquement pour les documents html.

Consultez cet exemple sur jsfiddle pour voir les différences en action

Exemple

Owais Qureshi
la source
1
Cette réponse était la plus simple à comprendre et la mieux formatée +1
Katie
Qu'est-ce que le diff bw :: html (data); & val (données); @Owais Qureshi
Gemme
9

Étrange que personne n'ait mentionné l'avantage de la prévention des scripts intersites .text()sur .html()(Bien que d'autres viennent de mentionner que.text() échappe aux données).

Il est toujours recommandé d'utiliser .text()lorsque vous souhaitez mettre à jour des données dans DOM qui ne sont que des données / texte pour que l'utilisateur puisse les voir.

.html() devrait être principalement utilisé pour obtenir le contenu HTML dans une div.

Deb
la source
5

Utilisez .text (…) lorsque vous avez l'intention d'afficher la valeur sous forme de texte simple.

Utilisez .html (…) lorsque vous avez l'intention d'afficher la valeur sous forme de texte au format html (ou contenu HTML).

Vous devez absolument utiliser .text (...) lorsque vous n'êtes pas sûr que votre texte (par exemple provenant d'un contrôle d'entrée) ne contient pas de caractères / balises ayant une signification particulière en HTML.Ceci est très important car cela pourrait avoir pour conséquence que le texte ne s'affichera pas correctement mais cela pourrait également provoquer l' activation d'un extrait de script JS indésirable (par exemple provenant d'une autre entrée utilisateur) .

Adorjan Princz
la source
2

Fondamentalement, $ ("# div"). Html utilise element.innerHTML pour définir le contenu, et $ ("# div"). Text (probablement) utilise element.textContent.

http://docs.jquery.com/Attributes/html :

Set the html contents of every matched element

http://docs.jquery.com/Attributes/text :

Similar to html(), but escapes HTML (replace "<" and ">" with their HTML 
entities).
Seth
la source
2

Eh bien en termes simples.

html () - pour obtenir le html interne (balises html et texte).

text () - pour obtenir uniquement du texte s'il est présent à l'intérieur (uniquement du texte)

Mustkeem K
la source
1

La différence est .html()évaluée en html, .text()avaluée en texte.
Considérons un bloc de 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'

L'illustration provient de ce lien http://api.jquery.com/text/

Pascal Tovohery
la source
1

.text()vous donnera le texte réel entre les balises HTML. Par exemple, le texte du paragraphe entrep balises. Ce qui est intéressant à noter, c'est qu'il vous donnera tout le texte de l'élément que vous visez avec votre $sélecteur ainsi que tout le texte des éléments enfants de cet élément sélectionné. Donc, si vous avez plusieurs pbalises avec du texte à l'intérieur de l'élément body et que vous en faites un $(body).text(), vous obtiendrez tout le texte de tous les paragraphes. (Texte uniquement, pas lep balises elles-mêmes.)

.html()vous donnera le texte et les balises. Donc $(body).html(), vous donnera essentiellement votre page HTML entière

.val()fonctionne pour les éléments qui ont un valueattribut, tels que input. Un inputne contient pas de texte ou HTML et donc .text()et .html()sera tous deuxnull pour les inputéléments.

Fabian Madurai
la source
0

Je pense que la différence est d'insérer une balise html dans text()votre balise html ne fonctionne pas

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

production : 

You are registered <br> Mister name sourname

remplacer text()parhtml()

production 

You are registered
Mister name sourname

alors la balise <br>fonctionne enhtml()

David
la source
1
Veuillez corriger votre réponse, le premier extrait doit être utilisé text().
MKaama
0

fonction de texte définir ou récupérer la valeur en texte brut, sinon, la fonction HTML définir ou récupérer la valeur en tant que balises HTML pour changer ou modifier cela. Si vous souhaitez simplement modifier le contenu, utilisez text (). Mais si vous devez modifier le balisage, vous devez utiliser hmtl ().

C'est une réponse factice pour moi après six ans, ça ne fait rien.

Minhaz
la source