276

Qual è la differenza tra text () e html () funzioni in jQuery?

$("#div").html('<a href="example.html">Link</a><b>hello</b>');

vs

$("#div").text('<a href="example.html">Link</a><b>hello</b>');

jquery dom

— Brettk
fonte

2

Una domanda che non si spiega da sé: quando abbiamo bisogno solo di testo (senza tag html), il text()metodo è più veloce ?? Quanto?

— Peter Krauss,

347

Penso che la differenza sia quasi autoesplicativa. Ed è super banale da testare.

jQuery.html()tratta la stringa come HTML, jQuery.text()tratta il contenuto come testo

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

Una differenza che potrebbe non essere così ovvia è descritta nella documentazione dell'API jQuery

Nella documentazione per .html () :

Il .html()metodo non è disponibile nei documenti XML.

E nella documentazione per .text () :

A differenza del .html()metodo, .text()può essere utilizzato sia in documenti XML che 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>

Espandi frammento

Demo live su http://jsfiddle.net/hossain/sUTVg/

— Peter Bailey
fonte

Va anche notato che la lunghezza è diversa anche tra i due. jsfiddle.net/sUTVg/458

— GreeKatrina,

5

@aequalsb Riconosco che questa è una vecchia domanda ora, ma devo notare che il default nell'uso di ´.html () ´ è pericoloso a causa del testo trattato come HTML. Se ottieni quel testo da un parametro di querystring, modulo, intestazione, l'URL o qualsiasi altro posto che qualcun altro oltre a te può fornire o modificare il testo, allora sei completamente aperto per XSS.

— Canis,

105

((si prega di aggiornare se necessario, questa risposta è un Wiki))

Sotto-domanda: quando solo il testo, cosa è più veloce `.text()`o `.html()`?

Risposta: .html() è più veloce! Vedi qui un "kit di test comportamentali" per tutte le domande .

Quindi, in conclusione, se hai "solo un testo", usa il html()metodo.

Nota: non ha senso? Ricorda che la .html()funzione è solo un wrapper .innerHTML, ma nella .text()funzione jQuery aggiunge un "filtro entità" e questo filtro consuma naturalmente tempo.

Ok, se vuoi davvero prestazioni ... Usa Javascript puro per accedere alla sostituzione diretta del testo da parte della nodeValueproprietà. Conclusioni di benchmark:

jQuery .html()è ~ 2x più veloce di .text().
pure JS ' .innerHTMLè ~ 3 volte più veloce di .html().
puro JS ' .nodeValue è ~ 50x più veloce di .html(), ~ 100x di .text()e ~ 20x di .innerHTML.

PS: la .textContentproprietà è stata introdotta con DOM-Level-3, .nodeValueè DOM-Level-2 ed è più veloce (!).

Vedi questo benchmark completo :

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

7

Ma se hai a che fare con input non attendibili, dovresti usare text () quando possibile.

— Scott Simontis,

@ScottSimontis quando imposti la nodeValueproprietà, trasforma ">" in "& lt;", ecc.

— Peter Krauss,

Quando "benchmark" con Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), il risultato è opposto ( .text()sembra ~ 7 volte più veloce di .html()). Codice sorgente: codepen.io/damhonglinh/pen/vGpQEO . Ho provato con 1500 elementi; .html()ha preso ~ 220ms e ha .text()preso ~ 30ms.

— Linh Dam,

Ciao @LinhDam. Hum ... usando il benchmark completo , il mio Firefox dice "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... E il mio Chrome dice "JQ TEMPI (3000x): html = 82 testo = 202 "," JS TIMES (3000x): html = 16 testo = 0 ".... quindi entrambi (Firefox e Chrome) hanno gli stessi rapporti temporali .

— Peter Krauss,

per essere un vero punto di riferimento tra text () e html (), il selettore dovrebbe essere fatto o getElementById o $ ("# work") in tutti i casi oppure eseguirai il benchmarking anche di $ ("# work") vs getElementById

— Octavioamu

66

Il primo esempio incorporerà effettivamente l'HTML all'interno divmentre il secondo esempio sfuggirà al testo sostituendo i caratteri relativi agli elementi con le entità dei caratteri corrispondenti in modo che vengano visualizzati letteralmente (ovvero l'HTML verrà visualizzato non visualizzato).

— Andrew Hare
fonte

1

Scusa, non capisco bene. Potresti spiegare ulteriormente. Grazie

— Brettk il

Cosa intendi con il secondo esempio che "codificherà"? Sta già codificando, no?

— Brettk,

@Brettk - Ho detto "codifica", ma era più uno scivolamento delle dita. Ho cambiato la mia risposta per riflettere meglio ciò che intendo.

— Andrew Hare,

6

Vuol dire che nella .text()funzione, tutto <verrà sostituito con <. Quindi con .html()il browser vedrà un collegamento e del testo in grassetto, con .text()il browser vedrà tutto come testo e non creare un collegamento o un testo in grassetto.

— Mottie,

59

Il text()metodo esegue l'escape di qualsiasi codice HTML che vi viene passato. Utilizzare text()quando si desidera inserire un codice HTML che sarà visibile alle persone che visualizzano la pagina.

Tecnicamente, il tuo secondo esempio produce:

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

che verrebbe visualizzato nel browser come:

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

Il tuo primo esempio verrà visualizzato come un link reale e del testo in grassetto.

— davidcl
fonte

4

Questo avrebbe dovuto essere incluso nella risposta selezionata per spiegare cosa sta realmente succedendo.

— d512,

27

In realtà entrambi sembrano in qualche modo simili ma sono piuttosto diversi, dipende dal tuo utilizzo o dalle tue intenzioni ciò che vuoi ottenere,

Dove usare:

utilizzare .html()per operare su contenitori con elementi html.
usare .text()per modificare il testo di elementi che di solito hanno tag di apertura e chiusura separati

Dove non usare:

.text() il metodo non può essere utilizzato su input di moduli o script.
- .val() per elementi di input o textarea.
- .html() per valore di un elemento script.
La raccolta di contenuti HTML da .text()convertirà i tag HTML in entità HTML.

Differenza:

.text() può essere utilizzato sia in documenti XML che HTML.
.html() è solo per documenti HTML.

Controlla questo esempio su jsfiddle per vedere le differenze nell'azione

Esempio

— Owais Qureshi
fonte

1

Questa risposta è stata la più facile da capire e meglio formattata +1

— Katie,

Qual è il diff bw :: html (data); & val (dati); @Owais Qureshi

— Gem

9

Strano che nessuno abbia menzionato il vantaggio della prevenzione di scripting Cross Site di .text()Over .html()(anche se altri lo hanno appena menzionato.text() sfugge ai dati).

Si consiglia sempre di utilizzare .text()quando si desidera aggiornare i dati in DOM che sono solo dati / testo che l'utente può vedere.

.html() dovrebbe essere utilizzato principalmente per ottenere il contenuto HTML all'interno di un div.

— debuttante
fonte

5

Utilizzare .text (...) quando si intende visualizzare il valore come testo semplice.

Utilizzare .html (...) quando si intende visualizzare il valore come testo in formato html (o contenuto HTML).

Dovresti assolutamente usare .text (...) quando non sei sicuro che il tuo testo (es. Proveniente da un controllo di input) non contenga caratteri / tag che hanno un significato speciale in HTML. Ciò è molto importante perché ciò potrebbe comportare la visualizzazione non corretta del testo, ma potrebbe anche attivare l'attivazione di uno snippet di script JS indesiderato (ad es. Proveniente da un altro input dell'utente) .

— Adorjan Princz
fonte

2

Fondamentalmente, $ ("# div"). Html usa element.innerHTML per impostare i contenuti e $ ("# div"). Text (probabilmente) usa 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
fonte

2

$ ('. div'). html (val) imposterà i valori HTML di tutti gli elementi selezionati, $ ('. div'). text (val) imposterà i valori di testo di tutti gli elementi selezionati.

Documenti API per jQuery.text ()

Documenti API per jQuery.html ()

Immagino che corrispondano rispettivamente a Node # textContent e Element # innerHTML . (Riferimenti DOM Gecko).

— Michiel Kalkman
fonte

2

Bene in parole semplici.

html () - per ottenere html interno (tag e testo html).

text () - per ottenere solo testo se presente all'interno (solo testo)

— Mustkeem K
fonte

1

Il diverso è .html()valutato come html, valutato come .text()testo.
Prendi in considerazione un blocco di 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'illustrazione è da questo link http://api.jquery.com/text/

— Pascal Tovohery
fonte

1

.text()ti fornirà il testo effettivo tra i tag HTML. Ad esempio, il testo del paragrafo tra i ptag. La cosa interessante da notare è che ti fornirà tutto il testo nell'elemento con cui stai prendendo di mira con il tuo $selettore più tutto il testo negli elementi figlio di quell'elemento selezionato. Quindi, se hai più ptag con testo all'interno dell'elemento body e fai un $(body).text(), otterrai tutto il testo da tutti i paragrafi. (Solo testo, non i ptag stessi.)

.html()ti darà il testo e i tag. Quindi $(body).html()fondamentalmente ti darà l'intera pagina HTML della tua pagina

.val()funziona per elementi che hanno un valueattributo, come ad esempio input. An inputnon ha contenuto di testo o HTML e quindi .text()e .html()sarà sia nullper gli inputelementi.

— Fabian Madurai
fonte

0

Penso che la differenza sia inserire il tag html nel text()tuo tag html non funziona

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

produzione :

You are registered <br> Mister name sourname

sostituendo text()conhtml()

produzione

You are registered
Mister name sourname

quindi il tag <br>funzionahtml()

— david
fonte

1

Correggi la tua risposta, il primo frammento dovrebbe usare text().

— MKaama,

0

funzione di testo imposta o recupera il valore come testo normale, altrimenti funzione HTML imposta o recupera il valore come tag HTML per cambiarlo o modificarlo. Se vuoi solo cambiare il contenuto, usa text (). Ma se è necessario modificare il markup, è necessario utilizzare hmtl ().

È una risposta fittizia per me dopo sei anni, non importa.

— Minhaz
fonte

Qual è la differenza tra jQuery: text () e html ()?

Sotto-domanda: quando solo il testo, cosa è più veloce .text()o .html()?

Dove usare:

Dove non usare:

Differenza:

Esempio

Sotto-domanda: quando solo il testo, cosa è più veloce `.text()`o `.html()`?