276

JQuery'de text () ve html () işlevleri arasındaki fark nedir?

$("#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
kaynak

2

Açıklayıcı olmayan bir soru: sadece metne ihtiyacımız olduğunda (html etiketi yok), text()yöntem daha hızlı mı ?? Ne kadar?

— Peter Krauss

347

Bence fark neredeyse kendini açıklayıcı. Ve test etmek çok önemli.

jQuery.html()dizeyi HTML olarak jQuery.text()ele alır, içeriği metin olarak ele alır

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

Çok açık olmayan bir fark jQuery API belgelerinde açıklanmıştır

.Html () dokümanlarında :

.html()Yöntem XML belgelerde kullanılamaz.

Ve .text () belgelerinde :

.html()Yöntemin aksine, .text()hem XML hem de HTML belgelerinde kullanılabilir.

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

Snippet'i genişlet

Http://jsfiddle.net/hossain/sUTVg/ adresinde canlı demo

— Peter Bailey
kaynak

Uzunluğun ikisi arasında da farklı olduğuna dikkat edilmelidir. jsfiddle.net/sUTVg/458

— GreeKatrina

5

@aequalsb Bunun eski bir soru olduğunu kabul ediyorum, ancak HTML olarak işlendiği için ´.html () ´ kullanmanın varsayılan olmasının tehlikeli olduğunu belirtmeliyim. Bu metni bir sorgu dizesi parametresinden, formdan, üstbilgiden, URL'den veya sizden başka birinin metin sağlayabileceği veya düzenleyebileceği başka bir yerden alırsanız, XSS için tamamen açıksınız demektir.

— Canis

105

((lütfen gerekirse güncelleyin, bu cevap bir Wiki'dir))

Alt soru: yalnızca metin olduğunda, daha hızlı olan nedir `.text()`veya `.html()`?

Cevap: .html() daha hızlı! Tüm soru için buraya bir "davranış test kiti" bakın .

Sonuç olarak, "sadece bir metin" varsa, html()yöntemi kullanın .

Not: Mantıklı değil mi? Bu .html()işlevin yalnızca bir sarıcı olduğunu .innerHTML, ancak .text()jQuery işlevinde bir "varlık filtresi" eklediğini ve bu filtrenin doğal olarak zaman harcadığını unutmayın.

Tamam, gerçekten performans istiyorsanız ... Doğrudan Javascript özelliğini kullanarak doğrudan metin yerine erişmek için kullanınnodeValue . Deney sonuçları:

jQuery en .html()~ 2 kat daha hızlıdır .text().
saf JS ' .innerHTML~ 3x daha hızlıdır .html().
saf JS ' .nodeValue, ~ 50x daha hızlı .html(), ~ 100x daha .text()ve ~ 20x daha .innerHTML.

PS: .textContentmülkiyet DOM-Level-3 ile tanıtıldı .nodeValue, DOM-Level-2 ve daha hızlı (!).

Bu tam karşılaştırmaya bakın :

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

7

Ancak güvenilmeyen girdiyle uğraşıyorsanız, mümkün olduğunda text () kullanmalısınız.

— Scott Simontis

@ScottSimontis nodeValueözelliği ayarladığınızda , ">" değerini "& lt;", vb. Biçimine dönüştürür

— Peter Krauss

Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ) ile "karşılaştırma" yaptığımda sonuç tam tersidir ( .text()~ 7 kat daha hızlı görünüyor .html()). Kaynak kodu: codepen.io/damhonglinh/pen/vGpQEO . 1500 elementle test ettim; .html()~ 220ms .text()aldı ve ~ 30ms aldı.

— Linh Barajı

Merhaba @LinhDam. Hum ... tüm karşılaştırmayı kullanarak Firefox'um "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... Ve Chrome'um "JQ" diyor ZAMANLAR (3000x): html = 82 metin = 202 "," JS ZAMANLAR (3000x): html = 16 metin = 0 ".... böylece her ikisi de (Firefox ve Chrome) aynı zaman oranlarına sahiptir .

— Peter Krauss

text () ve html () arasında gerçek bir karşılaştırma yapmak için seçicinin yapılması veya getElementById veya $ ("# work") her durumda karşılaştırılması veya $ ("# work") ile getElementById

— Octavioamu

66

İlk örnek aslında HTML'nin içine divgömülürken, ikinci örnek, kelimenin tam anlamıyla görüntülenmesi için öğeyle ilgili karakterleri karşılık gelen karakter varlıklarıyla değiştirerek metinden kaçacaktır (yani HTML oluşturulmamış olarak görüntülenecektir ).

— Andrew Hare
kaynak

1

Üzgünüm, tam olarak anlamıyorum. Daha fazla açıklayabilir misiniz? Teşekkürler

— Brettk

2. örnek "kodlayacaktır" ne demek? Zaten kodlıyor, değil mi?

— Brettk

@Brettk - Ben "kodlamak" dedim ama bu parmakların bir kayma oldu. Ne demek istediğimi daha iyi yansıtmak için cevabımı değiştirdim.

— Andrew Hare

6

İşlevde .text(), hepsinin <yerini alacağı anlamına gelir <. .html()Tarayıcı ile bir bağlantı ve bazı kalın metinler .text()göreceksiniz, tarayıcı ile her şeyi metin olarak görecek ve bir bağlantı veya kalın metin yapamayacaksınız.

— Mottie

59

text()Yöntem içine geçirilen herhangi bir HTML varlık-kaçar. text()Sayfayı görüntüleyen kişiler tarafından görülebilecek HTML kodu eklemek istediğinizde kullanın .

Teknik olarak, ikinci örneğiniz şunları üretir:

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

tarayıcıda şu şekilde oluşturulur:

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

İlk örneğiniz gerçek bir bağlantı ve bazı kalın metinler olarak işlenecektir.

— davidcl
kaynak

4

Neler olup bittiğini açıklamak için bu seçilen cevaba dahil edilmelidir.

— d512

27

Aslında her ikisi de biraz benzer görünüyor ama oldukça farklıdır, kullanımınıza veya neye ulaşmak istediğinize bağlıdır,

Nerede kullanılır:

.html()html elemanlarına sahip konteynerlerde çalışmak için kullanın .
.text()genellikle ayrı açma ve kapama etiketlerine sahip öğelerin metnini değiştirmek için kullanın

Nerede kullanılmaz:

.text() yöntem form girişlerinde veya komut dosyalarında kullanılamaz.
- .val() girdi veya metin alanı öğeleri için.
- .html() kod öğesinin değeri için.
HTML içeriğini almak .text(), html etiketlerini html varlıklarına dönüştürür.

Fark:

.text() hem XML hem de HTML belgelerinde kullanılabilir.
.html() yalnızca html belgeleri içindir.

Eylemdeki farklılıkları görmek için jsfiddle'daki bu örneği inceleyin

Misal

— Owais Qureshi
kaynak

1

Bu cevap en kolay anlaşılır ve en iyi biçimlendirilmiş +1

— Katie

Diff bw :: html (veri) nedir; & val (veri); @Owais Qureshi

— Gem

9

Hiç kimsenin Siteler Arası betik önleme avantajından daha .text()fazla .html()bahsetmediği .text()gariptir (Diğerleri verilerinden kaçtığını söylemesine rağmen ).

.text()DOM'da yalnızca kullanıcının görmesi için veri / metin olan verileri güncellemek istediğinizde kullanılması önerilir .

.html() çoğunlukla bir div içindeki HTML içeriğini almak için kullanılmalıdır.

— Deb
kaynak

5

Değeri basit bir metin olarak görüntülemek istediğinizde .text (…) kullanın.

Değeri html biçimli metin (veya HTML içeriği) olarak görüntülemek istediğinizde .html (…) kullanın.

Metninizin (örn. Giriş denetiminden gelen) HTML'de özel anlamı olan karakterler / etiketler içermediğinden emin olmadığınız zaman kesinlikle .text (...) kullanmalısınız . Bu gerçekten önemlidir çünkü bu, metnin düzgün görüntülenmemesine neden olabilir, ancak istenmeyen bir JS komut dosyası snippet'inin (örneğin, başka bir kullanıcı girişinden gelen) etkinleştirilmesine neden olabilir .

— Adorjan Princz
kaynak

2

Temel olarak, $ ("# div"). Html içeriği ayarlamak için element.innerHTML ve $ ("# div"). Metin (muhtemelen) element.textContent kullanır.

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
kaynak

2

$ ('. div'). html (val) seçilen tüm öğelerin HTML değerlerini, $ ('. div'). metin (val) seçilen tüm öğelerin metin değerlerini ayarlar.

JQuery.text () için API dokümanları

JQuery.html () için API dokümanları

Sırasıyla Düğüm # textContent ve Element # innerHTML'ye karşılık geldiğini tahmin ediyorum . (Gecko DOM referansları).

— Michiel Kalkman
kaynak

2

Basit anlamda.

html () - iç html (html etiketleri ve metin) almak için.

text () - içeride varsa yalnızca metin almak için (yalnızca metin)

— Mustkeem K
kaynak

1

Farklı .html()bir html olarak değerlendirilir, .text()metin olarak değerlendirilir . HTML HTML
bloğunu düşünün

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

Resim bu bağlantıdan alınmıştır http://api.jquery.com/text/

— Pascal Tovohery
kaynak

1

.text()HTML etiketleri arasındaki gerçek metni verecektir. Örneğin, petiketler arasındaki paragraf metni . Dikkat edilmesi gereken nokta, $seçicinizle hedeflediğiniz öğedeki tüm metni ve seçilen öğenin alt öğelerindeki tüm metni vermesidir. Birden varsa Yani pgövde elemanı içindeki metin ile etiket ve bir yapın $(body).text(), alacağınız tüm tüm paragraflar metin. (Yalnızca metin, petiketlerin kendisi değil .)

.html()size metin ve etiketleri verecektir . Yani $(body).html()temelde size, tüm sayfa HTML sayfası verecek

.val()valuegibi bir niteliğe sahip öğeler için çalışır input. Bir inputalan metin veya HTML yoktur ve dolayısıyla .text()ve .html()her ikisi olacak nulliçin inputelemanlar.

— Fabian Madurai
kaynak

0

Fark html etiketi eklemek olduğunu düşünüyorum text()html etiketi işlevsiz

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

çıktı :

You are registered <br> Mister name sourname

değiştirilmesi text()ilehtml()

çıktı

You are registered
Mister name sourname

etiket <br>çalışırhtml()

— david
kaynak

1

Lütfen cevabınızı düzeltin, ilk pasaj kullanmalıdır text().

— MKaama

0

metin işlevi değeri düz metin olarak ayarlar veya alır, aksi takdirde HTML işlevi, değeri değiştirmek veya değiştirmek için değeri HTML etiketi olarak alır veya alır. Sadece içeriği değiştirmek istiyorsanız text () kullanın. Ancak işaretlemeyi değiştirmeniz gerekiyorsa hmtl () kullanmanız gerekir.

Altı yıl sonra benim için kukla bir cevap, aldırma.

— Minhaz
kaynak

JQuery: text () ve html () arasındaki fark nedir?

Alt soru: yalnızca metin olduğunda, daha hızlı olan nedir .text()veya .html()?

Nerede kullanılır:

Nerede kullanılmaz:

Fark:

Misal

Alt soru: yalnızca metin olduğunda, daha hızlı olan nedir `.text()`veya `.html()`?