Jaka jest różnica między jQuery: text () i html ()?

Odpowiedzi:

347

Myślę, że różnica jest prawie oczywista. Testowanie jest bardzo trywialne.

jQuery.html()traktuje ciąg znaków jak HTML, jQuery.text()traktuje treść jak tekst

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

Różnica, która może nie być tak oczywista, została opisana w dokumentacji interfejsu API jQuery

W dokumentacji .html () :

Ta .html()metoda nie jest dostępna w dokumentach XML.

Oraz w dokumentacji .text () :

W przeciwieństwie do .html()metody, .text()może być stosowany zarówno w dokumentach XML, jak i 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>
Rozwiń fragment kodu
Demo na żywo na http://jsfiddle.net/hossain/sUTVg/

Peter Bailey
źródło
Należy również zauważyć, że długość również jest różna. jsfiddle.net/sUTVg/458
GreeKatrina
5
@aequalsb Zdaję sobie sprawę, że jest to stare pytanie, ale muszę zauważyć, że domyślnie używanie ´.html () ´ jest niebezpieczne, ponieważ tekst jest traktowany jako HTML. Jeśli otrzymujesz ten tekst z parametru zapytania, formularza, nagłówka, adresu URL lub dowolnego innego miejsca, które ktoś inny niż ty możesz dostarczyć lub edytować, to jesteś otwarty na XSS.
Canis
105

((w razie potrzeby zaktualizuj, ta odpowiedź to Wiki))

Podpytanie: gdy jest tylko tekst, co jest szybsze .text()lub .html()?

Odpowiedź: .html() jest szybszy! Zobacz tutaj „zestaw testów zachowania” dla wszystkich pytań .

Podsumowując, jeśli masz „tylko tekst”, użyj html()metody.

Uwaga: to nie ma sensu? Pamiętaj, że .html()funkcja jest tylko opakowaniem .innerHTML, ale w .text()funkcji jQuery dodaje „filtr jednostek” , a ten filtr naturalnie zajmuje czas.

Ok, jeśli naprawdę chcesz wydajności ... Użyj czystego Javascript, aby uzyskać dostęp do bezpośredniej zamiany tekstu na nodeValuewłaściwość. Wnioski ze wskaźnika:

  • jQuery's .html()jest ~ 2x szybszy niż .text().
  • czysty JS .innerHTMLjest ~ 3 razy szybszy niż .html().
  • czysty JS ' .nodeValuejest ~ 50x szybszy niż .html(), ~ 100x niż .text()i ~ 20x niż .innerHTML.

PS: .textContentwłaściwość została wprowadzona wraz z DOM-Level-3, .nodeValuejest DOM-Level-2 i jest szybsza (!).

Zobacz ten pełny test porównawczy :

// 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
źródło
7
Ale jeśli masz do czynienia z niezaufanym wejściem, powinieneś używać text (), gdy tylko jest to możliwe.
Scott Simontis,
@ScottSimontis po ustawieniu nodeValuewłaściwości przekształca „>” w „& lt;” itd.
Peter Krauss,
Kiedy „testuję” za pomocą Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), wynik jest odwrotny ( .text()wydaje się około 7 razy szybszy niż .html()). Kod źródłowy: codepen.io/damhonglinh/pen/vGpQEO . Testowałem z 1500 elementami; .html()zajęło ~ 220ms i .text()zajęło ~ 30ms.
Linh Dam
Cześć @LinhDam. Hum ... używając pełnego testu porównawczego , mój Firefox mówi „JQ TIMES (3000x): html = 82 text = 254”, „JS TIMES (3000x): html = 15 text = 4” ... A mój Chrome mówi „JQ TIMES (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... więc oba (Firefox i Chrome) mają te same przedziały czasowe .
Peter Krauss,
aby być prawdziwym testem porównawczym między text () a html (), selektor powinien zostać wykonany lub getElementById lub $ („# work”) we wszystkich przypadkach, albo będziesz
testował
66

Pierwszy przykład faktycznie osadzi HTML wewnątrz, divpodczas gdy drugi przykład ucieknie od tekstu poprzez zastąpienie znaków związanych z elementem odpowiednimi jednostkami znakowymi, aby wyświetlał się dosłownie (tzn. HTML nie będzie wyświetlany ).

Andrew Hare
źródło
1
Przepraszam, nie do końca rozumiem. Czy mógłbyś dalej wyjaśnić. Dzięki
Brettk,
Co masz na myśli mówiąc, że drugi przykład „zakoduje”? Już koduje, nie?
Brettk,
@Brettk - Powiedziałem „koduj”, ale to było bardziej poślizgnięcie palców. Zmieniłem odpowiedź, aby lepiej odzwierciedlić to, co mam na myśli.
Andrew Hare,
6
Oznacza to, że w .text()funkcji wszystko <zostanie zastąpione przez &lt;. Tak więc .html()w przeglądarce zobaczysz link i pogrubiony tekst, a .text()przeglądarka zobaczy wszystko jako tekst i nie utworzy linku ani pogrubionego tekstu.
Mottie
59

text()Metoda jednostka-ucieka dowolny kod HTML, który jest przekazywany do niego. Użyj, text()jeśli chcesz wstawić kod HTML, który będzie widoczny dla osób przeglądających stronę.

Technicznie twój drugi przykład daje:

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

które byłyby renderowane w przeglądarce jako:

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

Twój pierwszy przykład zostanie wyświetlony jako rzeczywisty link i pogrubiony tekst.

davidcl
źródło
4
Powinno to zostać uwzględnione w wybranej odpowiedzi, aby wyjaśnić, co naprawdę się dzieje.
d512
27

W rzeczywistości oba wyglądają nieco podobnie, ale są zupełnie różne, zależy to od sposobu użycia lub zamiaru, co chcesz osiągnąć,

Gdzie używać:

  • służy .html()do obsługi kontenerów z elementami HTML.
  • służy .text()do modyfikowania tekstu elementów zwykle posiadających osobne tagi otwierające i zamykające

Gdzie nie używać:

  • .text() Metoda nie może być używana w danych wejściowych formularza lub skryptach.

    • .val() dla elementów wejściowych lub textarea.
    • .html() dla wartości elementu skryptu.

  • Pobieranie zawartości HTML .text()zamieni tagi HTML w encje HTML.

Różnica:

  • .text() może być stosowany zarówno w dokumentach XML, jak i HTML.
  • .html() dotyczy tylko dokumentów HTML.

Sprawdź ten przykład na jsfiddle, aby zobaczyć różnice w działaniu

Przykład

Owais Qureshi
źródło
1
Ta odpowiedź była najłatwiejsza do zrozumienia i najlepiej sformatowana +1
Katie
Co to jest diff bw :: html (data); i val (dane); @Owais Qureshi
Gem
9

Dziwne, że nikt nie wspomniał o zapobieganie scripting korzyści Cross Site of .text()over .html()(Chociaż inni tylko wspomnieć, że .text()ucieka danych).

Zawsze zaleca się stosowanie, .text()gdy chcesz aktualizować dane w DOM, które są tylko danymi / tekstem dla użytkownika.

.html() powinny być najczęściej używane do uzyskania treści HTML w div.

Deb
źródło
5

Użyj .text (…), jeśli chcesz wyświetlać wartość jako zwykły tekst.

Użyj .html (…), jeśli chcesz wyświetlać wartość jako tekst w formacie HTML (lub treść HTML).

Zdecydowanie powinieneś użyć .text (...), jeśli nie masz pewności, że twój tekst (np. Pochodzący z kontrolki wprowadzania) nie zawiera znaków / znaczników, które mają specjalne znaczenie w HTML. Jest to naprawdę ważne, ponieważ może to spowodować, że tekst nie będzie wyświetlany poprawnie, ale może również spowodować aktywację niechcianego fragmentu skryptu JS (np. Pochodzącego od danych wprowadzonych przez innego użytkownika) .

Adorjan Princz
źródło
2

Zasadniczo $ („# div”). Html używa element.innerHTML do ustawiania zawartości, a $ („# div”). Text (prawdopodobnie) używa 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
źródło
2

Cóż w prostym znaczeniu.

html () - aby uzyskać wewnętrzny HTML (tagi HTML i tekst).

text () - aby uzyskać tylko tekst, jeśli jest obecny w środku (tylko tekst)

Mustkeem K
źródło
1

Inna jest .html()oceniana jako html, oceniana jako .text()tekst.
Rozważ blok 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'

Ilustracja pochodzi z tego linku http://api.jquery.com/text/

Pascal Tovohery
źródło
1

.text()poda ci tekst pomiędzy znacznikami HTML. Na przykład tekst akapitu pomiędzy pznacznikami. Co ciekawe, da ci cały tekst w elemencie, na który celujesz za pomocą $selektora, oraz cały tekst w elementach potomnych tego wybranego elementu. Więc jeśli masz wiele pznaczników z tekstem w elemencie body i zrobisz a $(body).text(), otrzymasz cały tekst ze wszystkich akapitów. (Tylko tekst, a nie psame tagi).

.html()da ci tekst i tagi. Więc w $(body).html()zasadzie da ci całą stronę HTML

.val()działa dla elementów, które mają valueatrybut, takich jak input. An inputnie zawiera tekstu ani HTML, a zatem .text()i .html()będzie zarówno nulldla inputelementów.

Fabian Madurai
źródło
0

Myślę, że różnica polega na tym, że wstawienie tagu html w text()tobie nie działa

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

wynik : 

You are registered <br> Mister name sourname

zastępując text()zhtml()

wynik 

You are registered
Mister name sourname

wtedy tag <br>działahtml()

David
źródło
1
Popraw swoją odpowiedź, pierwszy fragment powinien zostać użyty text().
MKaama,
0

funkcja tekstowa ustawia lub pobiera wartość jako zwykły tekst, w przeciwnym razie funkcja HTML ustawia lub pobiera wartość jako znaczniki HTML, aby to zmienić lub zmodyfikować. Jeśli chcesz po prostu zmienić treść, użyj text (). Ale jeśli musisz zmienić znaczniki, musisz użyć hmtl ().

To dla mnie fałszywa odpowiedź po sześciu latach, nieważne.

Minhaz
źródło