276

Qual a diferença entre as funções text () e html () no 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

Uma pergunta que não é auto-explicativa: quando precisamos apenas de texto (sem tags html), o text()método é mais rápido? Quanto?

precisa

347

Eu acho que a diferença é quase auto-explicativa. E é super trivial para testar.

jQuery.html()trata a string como HTML, jQuery.text()trata o conteúdo 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>

Uma diferença que pode não ser tão óbvia é descrita na documentação da API do jQuery

Na documentação de .html () :

O .html()método não está disponível em documentos XML.

E na documentação para .text () :

Diferentemente do .html()método, .text()pode ser usado em documentos XML e 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 snippet

Demonstração ao vivo em http://jsfiddle.net/hossain/sUTVg/

Peter Bailey
fonte

Deve-se notar também, que o comprimento também é diferente entre os dois. jsfiddle.net/sUTVg/458

GreeKatrina

5

@ aequalsb Eu reconheço que essa é uma pergunta antiga agora, mas tenho que observar que o não uso de 'html ()' é perigoso por causa do texto ser tratado como HTML. Se você obtiver esse texto de um parâmetro, formulário, cabeçalho, URL ou qualquer outro local que outra pessoa que você não possa fornecer ou editar o texto, estará aberto para o XSS.

Canis

105

((atualize se necessário, esta resposta é um Wiki))

Subquestão: quando apenas texto, o que é mais rápido `.text()`ou `.html()`?

Resposta: .html() é mais rápido! Veja aqui um "kit de teste de comportamento" para todas as perguntas .

Portanto, em conclusão, se você tiver "apenas um texto", use o html()método

Nota: Não faz sentido? Lembre-se de que a .html()função é apenas um invólucro .innerHTML, mas na .text()função o jQuery adiciona um "filtro de entidade" e esse filtro naturalmente consome tempo.

Ok, se você realmente deseja desempenho ... Use Javascript puro para acessar a substituição direta de texto pela nodeValuepropriedade Conclusões de referência:

jQuery .html()é ~ 2x mais rápido que .text().
JS puro .innerHTMLé ~ 3x mais rápido que .html().
JS puro ' .nodeValueé ~ 50x mais rápido que .html(), ~ 100x que .text()e ~ 20x que .innerHTML.

PS: a .textContentpropriedade foi introduzida com o DOM-Level-3, .nodeValueé DOM-Level-2 e é mais rápida (!).

Veja esta referência completa :

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

Mas se você estiver lidando com entradas não confiáveis, use text () sempre que possível.

Scott Simontis

@ScottSimontis quando você definir nodeValuea propriedade, ele transforma ">" em "& lt;", etc.

Peter Krauss

Quando eu "comparo" com o Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), o resultado é oposto ( .text()parece ~ 7x mais rápido que .html()). Código fonte: codepen.io/damhonglinh/pen/vGpQEO . Eu testei com 1500 elementos; .html()levou ~ 220ms e .text()levou ~ 30ms.

Linh Dam 08/04

Olá @LinhDam. Hum ... usando o benchmark completo , meu Firefox diz "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... E meu Chrome diz "JQ TIMES (3000x): html = 82 texto = 202 "," JS TIMES (3000x): html = 16 texto = 0 ".... para que ambos (Firefox e Chrome) tenham as mesmas proporções de tempo .

Peter Krauss

para ser uma referência real entre text () e html (), o seletor deve ser executado ou getElementById ou $ ("# work") em todos os casos ou você fará um benchmarking também de $ ("# work") vs getElementById

Octavioamu

66

O primeiro exemplo, na verdade, incorporará o HTML ao divpasso que o segundo exemplo escapará do texto, substituindo os caracteres relacionados aos elementos pelas respectivas entidades de caracteres correspondentes , para que sejam exibidos literalmente (ou seja, o HTML será exibido sem renderização).

Andrew Hare
fonte

1

Desculpe, eu não entendo direito. Você poderia explicar melhor. Obrigado

Brettk

Como assim, o segundo exemplo "codificará"? Já está codificando, não?

Brettk

@Brettk - eu disse "codificar", mas isso foi mais um deslize dos dedos. Mudei minha resposta para refletir melhor o que quero dizer.

22715 Andrew Hare

6

Ele quer dizer que, na .text()função, tudo <será substituído por <. Portanto, com .html()o navegador, você verá um link e algum texto em negrito, com .text()o navegador verá tudo como texto e não criará um link ou texto em negrito.

Mottie

59

A text()entidade de método escapa qualquer HTML que é passado para ela. Use text()quando desejar inserir código HTML que ficará visível para as pessoas que visualizarem a página.

Tecnicamente, seu segundo exemplo produz:

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

que seria renderizado no navegador como:

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

Seu primeiro exemplo será renderizado como um link real e em texto em negrito.

davidcl
fonte

4

Isso deveria ter sido incluído na resposta selecionada para explicar o que realmente está acontecendo.

D512

27

Na verdade, ambos parecem um pouco semelhantes, mas são bem diferentes, depende do seu uso ou intenção do que você deseja alcançar,

Onde usar:

use .html()para operar em contêineres com elementos html.
use .text()para modificar o texto dos elementos que geralmente possuem tags de abertura e fechamento separadas

Onde não usar:

.text() O método não pode ser usado em entradas ou scripts de formulário.
- .val() para elementos de entrada ou área de texto.
- .html() para o valor de um elemento de script.
A coleta de conteúdo html .text()converterá as tags html em entidades html.

Diferença:

.text() pode ser usado em documentos XML e HTML.
.html() é apenas para documentos html.

Verifique este exemplo no jsfiddle para ver as diferenças de ação

Exemplo

Owais Qureshi
fonte

1

Esta resposta foi a mais fácil de entender e melhor formatada +1

Katie

Qual é o diff bw :: html (data); & val (dados); @Owais Qureshi

Gem

9

Estranho que ninguém mencione o benefício de prevenção de script entre sites de .text()mais .html()(embora outros tenham acabado de mencionar que .text()escapa aos dados).

É sempre recomendável usar .text()quando você deseja atualizar dados no DOM, que são apenas dados / texto para o usuário ver.

.html() deve ser usado principalmente para obter o conteúdo HTML dentro de uma div.

Deb
fonte

5

Use .text (…) quando pretender exibir o valor como um texto simples.

Use .html (…) quando pretender exibir o valor como um texto formatado em html (ou conteúdo HTML).

Você definitivamente deve usar .text (...) quando não tiver certeza de que seu texto (por exemplo, proveniente de um controle de entrada) não contém caracteres / tags com significado especial em HTML. Isso é realmente importante, pois isso pode resultar na exibição incorreta do texto, mas também pode causar a ativação de um snippet de script JS indesejado (por exemplo, proveniente de outra entrada do usuário) .

Adorjan Princz
fonte

2

Basicamente, $ ("# div"). Html usa element.innerHTML para definir o conteúdo e $ ("# div"). Text (provavelmente) 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) definirá os valores HTML de todos os elementos selecionados, $ ('. div'). text (val) definirá os valores de texto de todos os elementos selecionados.

Documentos da API para jQuery.text ()

Documentos da API para jQuery.html ()

Eu acho que eles correspondem ao Nó # textContent e ao Element # innerHTML , respectivamente. (Referências DOM do Gecko).

Michiel Kalkman
fonte

2

Bem, em termos simples.

html () - para obter html interno (tags e texto html).

text () - para obter apenas texto se presente (apenas texto)

Mustkeem K
fonte

1

O diferente é .html()avaliado como um html, .text()avaliado como um texto.
Considere um bloco 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'

A ilustração é deste link http://api.jquery.com/text/

Pascal Tovohery
fonte

1

.text()fornecerá o texto real entre as tags HTML. Por exemplo, o texto do parágrafo entre as ptags. O que é interessante notar é que ele fornecerá todo o texto do elemento que você está alvejando com o $seletor, além de todo o texto nos elementos filhos desse elemento selecionado. Portanto, se você tiver várias ptags com texto dentro do elemento body e fizer a $(body).text(), receberá todo o texto de todos os parágrafos. (Somente texto, não as ppróprias tags.)

.html()fornecerá o texto e as tags. Então $(body).html(), basicamente, você fornece toda a sua página HTML

.val()funciona para elementos que possuem um valueatributo, como input. Um inputnão tem texto contido ou HTML e, portanto, .text()e .html()serão ambos nullpara inputelementos.

Fabian Madurai
fonte

0

Eu acho que a diferença é inserir tag html na text()sua tag html não funciona

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

resultado :

You are registered <br> Mister name sourname

substituindo text()porhtml()

resultado

You are registered
Mister name sourname

então a tag <br>funciona emhtml()

david
fonte

1

Corrija sua resposta, o primeiro snippet deve ser usado text().

precisa saber é o seguinte

0

a função de texto define ou recupera o valor como texto sem formatação; caso contrário, a função HTML define ou recupera o valor como tags HTML para alterar ou modificar isso. Se você quiser apenas alterar o conteúdo, use texto (). Mas se você precisar alterar a marcação, use hmtl ().

É uma resposta idiota para mim depois de seis anos, não se importe.

Minhaz
fonte

Qual é a diferença entre jQuery: text () e html ()?

Respostas:

Subquestão: quando apenas texto, o que é mais rápido `.text()`ou `.html()`?

Onde usar:

Onde não usar:

Diferença:

Exemplo

Qual é a diferença entre jQuery: text () e html ()?

Respostas:

Subquestão: quando apenas texto, o que é mais rápido .text()ou .html()?

Onde usar:

Onde não usar:

Diferença:

Exemplo

Subquestão: quando apenas texto, o que é mais rápido `.text()`ou `.html()`?