276

¿Cuál es la diferencia entre las funciones text () y html () en 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
fuente

2

Una pregunta que no se explica por sí misma: cuando solo necesitamos texto (sin etiquetas html), ¿el text()método es más rápido? ¿Cuánto cuesta?

Peter Krauss el

347

Creo que la diferencia se explica por sí misma. Y es super trivial probarlo.

jQuery.html()trata la cadena como HTML, jQuery.text()trata el contenido como texto

<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 diferencia que puede no ser tan obvia se describe en la documentación de la API jQuery

En la documentación para .html () :

El .html()método no está disponible en documentos XML.

Y en la documentación para .text () :

A diferencia del .html()método, .text()se puede utilizar en documentos XML y 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>

Expandir fragmento

Demostración en vivo en http://jsfiddle.net/hossain/sUTVg/

Peter Bailey
fuente

Cabe señalar también, que la longitud es diferente entre los dos también. jsfiddle.net/sUTVg/458

GreeKatrina

55

@aequalsb Reconozco que esta es una pregunta vieja ahora, pero tengo que comentar que el uso predeterminado de ´.html () ´ es peligroso debido a que el texto se trata como HTML. Si obtiene ese texto de un parámetro de cadena de consulta, formulario, encabezado, URL o cualquier otro lugar que alguien más que usted pueda proporcionar o editar el texto, entonces está completamente abierto para XSS.

Canis

105

((actualice si es necesario, esta respuesta es un Wiki))

Subpregunta: cuando solo es texto, ¿qué es más rápido `.text()`o `.html()`?

Respuesta: .html() es más rápido! Vea aquí un "kit de prueba de comportamiento" para todas las preguntas .

En conclusión, si tiene "solo un texto", utilice el html()método.

Nota: ¿No tiene sentido? Recuerde que la .html()función es solo un contenedor .innerHTML, pero en la .text()función jQuery agrega un "filtro de entidad" , y este filtro naturalmente consume tiempo.

Ok, si realmente quieres rendimiento ... Utiliza Javascript puro para acceder al reemplazo directo de texto por la nodeValuepropiedad. Conclusiones de referencia:

jQuery .html()es ~ 2 veces más rápido que .text().
pure JS ' .innerHTMLes ~ 3 veces más rápido que .html().
pure JS ' .nodeValuees ~ 50 .html()veces más rápido que , ~ 100 veces más .text()y ~ 20 veces más que .innerHTML.

PD: la .textContentpropiedad se introdujo con DOM-Level-3, .nodeValuees DOM-Level-2 y es más rápido (!).

Vea este punto de referencia 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
fuente

77

Pero si se trata de una entrada no confiable, debe usar text () siempre que sea posible.

Scott Simontis

@ScottSimontis cuando establece la nodeValuepropiedad, transforma ">" en "& lt;", etc.

Peter Krauss

Cuando "comparo" con Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), el resultado es opuesto ( .text()parece ~ 7 veces más rápido que .html()). Código fuente: codepen.io/damhonglinh/pen/vGpQEO . Probé con 1500 elementos; .html()tomó ~ 220ms y .text()tomó ~ 30ms.

Linh Dam

Hola @LinhDam Hum ... usando el punto de referencia completo , mi Firefox dice "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... Y mi Chrome dice "JQ TIMES (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... por lo que ambos (Firefox y Chrome) tienen las mismas relaciones de tiempo .

Peter Krauss

para ser un punto de referencia real entre text () y html (), el selector se debe hacer o getElementById o $ ("# work") en todos los casos, o se comparará también el $ ("# work") vs getElementById

Octavioamu

66

El primer ejemplo en realidad incrustará HTML dentro del divmientras que el segundo ejemplo escapará del texto mediante el reemplazo de caracteres relacionados con elementos con sus entidades de caracteres correspondientes para que se muestre literalmente (es decir, el HTML se mostrará no representado).

Andrew Hare
fuente

1

Lo siento, no entiendo del todo. ¿Podría explicar más? Gracias

Brettk

¿Qué quiere decir que el segundo ejemplo "codificará"? Ya está codificando, ¿no?

Brettk

@Brettk - Dije "codificar" pero eso fue más un deslizamiento de los dedos Cambié mi respuesta para reflejar mejor lo que quiero decir.

Andrew Hare

66

Quiere decir que en la .text()función, todo <será reemplazado por <. Entonces, con .html()el navegador verá un enlace y texto en negrita, con .text()el navegador verá todo como texto y no creará un enlace o texto en negrita.

Mottie

59

El text()método entidad escapa a cualquier HTML que se le pase. Úselo text()cuando desee insertar código HTML que será visible para las personas que vean la página.

Técnicamente, su segundo ejemplo produce:

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

que se representaría en el navegador como:

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

Su primer ejemplo se representará como un enlace real y un texto en negrita.

davidcl
fuente

44

Esto debería haberse incluido en la respuesta seleccionada para explicar lo que realmente está sucediendo.

d512

27

En realidad, ambos parecen algo similares, pero son bastante diferentes, depende de su uso o intención de lo que desea lograr,

Dónde utilizar:

se utiliza .html()para operar en contenedores que tienen elementos html.
se usa .text()para modificar el texto de elementos que generalmente tienen etiquetas separadas de apertura y cierre

Donde no usar:

.text() El método no se puede utilizar en entradas de formulario o scripts.
- .val() para elementos de entrada o textarea.
- .html() para el valor de un elemento de script.
Recoger contenido html de .text()convertirá las etiquetas html en entidades html.

Diferencia:

.text() se puede usar en documentos XML y HTML.
.html() es solo para documentos html.

Verifique este ejemplo en jsfiddle para ver las diferencias en acción

Ejemplo

Owais Qureshi
fuente

1

Esta respuesta fue la más fácil de entender y mejor formateada +1

Katie

¿Qué es el diff bw :: html (data); & val (datos); @Owais Qureshi

Gema

9

Es extraño que nadie mencione el beneficio de prevención de scripts de Cross Site de .text()más .html()(aunque otros acaban de mencionar que se .text()escapa de los datos).

Siempre se recomienda usar .text()cuando desee actualizar datos en DOM, que son solo datos / texto para que el usuario los vea.

.html() debe usarse principalmente para obtener el contenido HTML dentro de un div.

Debutante
fuente

5

Use .text (...) cuando tenga la intención de mostrar el valor como un texto simple.

Utilice .html (...) cuando tenga la intención de mostrar el valor como texto con formato html (o contenido HTML).

Definitivamente debe usar .text (...) cuando no está seguro de que su texto (por ejemplo, proveniente de un control de entrada) no contenga caracteres / etiquetas que tengan un significado especial en HTML. Esto es realmente importante porque esto podría provocar que el texto no se muestre correctamente, pero también podría provocar que se active un fragmento de script JS no deseado (por ejemplo, proveniente de otra entrada del usuario) .

Adorjan Princz
fuente

2

Básicamente, $ ("# div"). Html usa element.innerHTML para establecer contenidos, y $ ("# div"). Text (probablemente) 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
fuente

2

$ ('. div'). html (val) establecerá los valores HTML de todos los elementos seleccionados, $ ('. div'). text (val) establecerá los valores de texto de todos los elementos seleccionados.

Documentos API para jQuery.text ()

Documentos de API para jQuery.html ()

Supongo que corresponden al Nodo # textContent y al Elemento # innerHTML , respectivamente. (Referencias DOM Gecko).

Michiel Kalkman
fuente

2

Bueno en términos simples.

html (): para obtener html interno (etiquetas y texto html).

text (): para obtener solo texto si está presente dentro (solo texto)

Mustkeem K
fuente

1

Lo diferente se .html()evalúa como un html, se .text()valora como un texto.
Considere un bloque 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'

La ilustración es de este enlace http://api.jquery.com/text/

Tovoheria Pascal
fuente

1

.text()le dará el texto real entre las etiquetas HTML. Por ejemplo, el texto del párrafo entre petiquetas. Es interesante notar que le dará todo el texto en el elemento que está apuntando con su $selector más todo el texto en los elementos secundarios de ese elemento seleccionado. Entonces, si tiene varias petiquetas con texto dentro del elemento del cuerpo y hace una $(body).text(), obtendrá todo el texto de todos los párrafos. (Solo texto, no las petiquetas en sí).

.html()te dará el texto y las etiquetas. Así que $(body).html()básicamente le dará a su página HTML toda la página

.val()funciona para elementos que tienen un valueatributo, como input. Una inputno tiene texto contenido o HTML y por lo tanto .text(), y .html()ambos estarán nullde inputelementos.

Fabian Madurai
fuente

0

Creo que la diferencia es insertar una etiqueta html en text()tu etiqueta html que no funciona

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

salida:

You are registered <br> Mister name sourname

reemplazando text()conhtml()

salida

You are registered
Mister name sourname

entonces la etiqueta <br>funciona enhtml()

david
fuente

1

Corrija su respuesta, debe usar el primer fragmento text().

MKaama

0

la función de texto establece o recupera el valor como texto sin formato; de lo contrario, la función HTML establece o recupera el valor como etiquetas HTML para cambiar o modificar eso. Si solo desea cambiar el contenido, use text (). Pero si necesita cambiar el marcado, debe usar hmtl ().

Es una respuesta ficticia para mí después de seis años, no importa.

Minhaz
fuente

¿Cuál es la diferencia entre jQuery: text () y html ()?

Respuestas:

Subpregunta: cuando solo es texto, ¿qué es más rápido `.text()`o `.html()`?

Dónde utilizar:

Donde no usar:

Diferencia:

Ejemplo

¿Cuál es la diferencia entre jQuery: text () y html ()?

Respuestas:

Subpregunta: cuando solo es texto, ¿qué es más rápido .text()o .html()?

Dónde utilizar:

Donde no usar:

Diferencia:

Ejemplo

Subpregunta: cuando solo es texto, ¿qué es más rápido `.text()`o `.html()`?