276

В чем разница между функциями text () и html () в jQuery?

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

против

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

jquery dom Brettk
источник

2

Вопрос, который не говорит само за себя: когда нам нужен только текст (без HTML-тегов), text()метод быстрее ?? Сколько?

Питер Краусс

347

Я думаю, что разница почти самоочевидна. И это супер тривиально для тестирования.

jQuery.html()обрабатывает строку как HTML, jQuery.text()обрабатывает содержимое как текст

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

Различие, которое может быть не столь очевидным, описано в документации по jQuery API.

В документации для .html () :

.html()Метод не доступен в XML - документах.

И в документации по .text () :

В отличие от .html()метода, .text()может использоваться как в XML, так и в 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>

Развернуть фрагмент

Живая демоверсия на http://jsfiddle.net/hossain/sUTVg/

Питер Бейли
источник

Следует также отметить, что длина также различается между двумя. jsfiddle.net/sUTVg/458

GreeKatrina

5

@aequalsb Я признаю, что это старый вопрос сейчас, но я должен заметить, что использование «.html ()» по умолчанию опасно из-за того, что текст обрабатывается как HTML. Если вы получите этот текст из параметра строки запроса, формы, заголовка, URL-адреса или любого другого места, которое кто-либо другой, кроме вас, может предоставить или отредактировать текст, тогда вы широко открыты для XSS.

Canis

105

((пожалуйста, обновите при необходимости, этот ответ вики)

Подвопрос: когда только текст, что быстрее `.text()`или `.html()`?

Ответ: .html() быстрее! См. Здесь «набор тестов поведения» для всех вопросов .

Итак, в заключение, если у вас есть «только текст», используйте html()метод.

Примечание: не имеет смысла? Помните, что .html()функция является только оболочкой .innerHTML, но в .text()функцию jQuery добавляет «фильтр сущностей» , и этот фильтр, естественно, потребляет время.

Хорошо, если вы действительно хотите производительность ... Используйте чистый Javascript для доступа к прямой замене текста nodeValueсвойством. Контрольные выводы:

JQuery в .html()~ 2 раза быстрее, чем .text().
чистый JS ' .innerHTMLв 3 раза быстрее чем .html().
чистый JS ' .nodeValueв 50 раз быстрее .html(), в 100 раз .text()и в 20 раз .innerHTML.

PS: .textContentсвойство было введено с DOM-Level-3, .nodeValueявляется DOM-Level-2 и быстрее (!).

Смотрите этот полный тест :

// 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
источник

7

Но если вы имеете дело с ненадежным вводом, вы должны использовать text (), когда это возможно.

Скотт Симонтис

@ScottSimontis, когда вы устанавливаете nodeValueсвойство, оно преобразует «>» в «& lt;» и т. Д.

Питер Краусс

Когда я выполняю «тестирование» с помощью Chrome DevTools ( developer.chrome.com/devtools/docs/timeline ), результат получается противоположным ( .text()кажется, в 7 раз быстрее, чем .html()). Исходный код: codepen.io/damhonglinh/pen/vGpQEO . Я проверил с 1500 элементов; .html()заняло ~ 220 мс и .text()заняло ~ 30 мс.

Линь Дам

Привет @LinhDam. Хм ... используя полный тест , мой Firefox говорит "JQ TIMES (3000x): html = 82 text = 254", "JS TIMES (3000x): html = 15 text = 4" ... И мой Chrome говорит "JQ TIMES (3000x): html = 82 text = 202 "," JS TIMES (3000x): html = 16 text = 0 ".... поэтому оба (Firefox и Chrome) имеют одинаковые коэффициенты времени .

Питер Краусс

чтобы быть реальным эталоном между text () и html (), селектор должен быть сделан или getElementById или $ ("# work") во всех случаях, или вы будете сравнивать также $ ("# work") с getElementById

Octavioamu

66

Первый пример на самом деле будет вставлять HTML внутри, divтогда как второй пример будет экранировать текст путем замены связанных с элементом символов соответствующими им символьными объектами, чтобы он отображался буквально (т. Е. HTML будет отображаться без визуализации).

Эндрю Хэйр
источник

1

Извините, я не совсем понимаю. Не могли бы вы дополнительно объяснить. Спасибо

Бреттк

Что вы имеете в виду, что второй пример будет «кодировать»? Это уже кодировка, нет?

Бретк

@Brettk - я сказал «закодировать», но это было скорее скольжение пальцев. Я изменил свой ответ, чтобы лучше отразить то, что я имею в виду.

Эндрю Заяц

6

Он означает, что в .text()функции все <будет заменено на <. Таким образом, .html()в браузере будет отображаться ссылка и некоторый жирный текст, при .text()этом браузер будет видеть все как текст, а не создавать ссылку или жирный текст.

Мотти

59

text()Метод сущность-ускользает любой HTML , который передается в него. Используйте, text()когда вы хотите вставить HTML-код, который будет виден людям, которые просматривают страницу.

Технически, ваш второй пример производит:

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

который будет отображаться в браузере как:

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

Ваш первый пример будет отображен как фактическая ссылка и текст, выделенный жирным шрифтом.

davidcl
источник

4

Это должно было быть включено в выбранный ответ, чтобы объяснить, что на самом деле происходит.

d512

27

На самом деле оба выглядят несколько похожими, но совершенно разные, это зависит от вашего использования или намерения, чего вы хотите достичь,

Где использовать:

использовать .html()для работы с контейнерами, содержащими элементы html.
используется .text()для изменения текста элементов, обычно имеющих отдельные открывающие и закрывающие теги

Где не использовать:

.text() метод не может быть использован для ввода данных или сценариев.
- .val() для ввода или элементов textarea.
- .html() для значения элемента скрипта.
При получении html-контента .text()html-теги преобразуются в html-объекты.

Разница:

.text() может использоваться как в XML, так и в HTML документах.
.html() только для HTML-документов.

Проверьте этот пример на jsfiddle, чтобы увидеть различия в действии

пример

Оваис Куреши
источник

1

Этот ответ был самым простым для понимания и лучше отформатирован +1

Кэти

Что такое diff bw :: html (data); & val (данные); @ Оваис Куреши

камень

9

Странно , что никто не упомянул предотвращение сценариев выгоды Cross Сайта .text()над .html()(Хотя другими только что говорил , что .text()ускользает данные).

Всегда рекомендуется использовать, .text()когда вы хотите обновить данные в DOM, которые являются просто данными / текстом для просмотра пользователем.

.html() должен использоваться в основном для получения содержимого HTML внутри div.

дебютантка
источник

5

Используйте .text (…), когда вы хотите отобразить значение в виде простого текста.

Используйте .html (…), если вы хотите отобразить значение в виде текста в формате html (или содержимого HTML).

Вам определенно следует использовать .text (...), когда вы не уверены, что ваш текст (например, поступающий из элемента управления вводом) не содержит символов / тегов, которые имеют особое значение в HTML. Это действительно важно, потому что это может привести к тому, что текст не будет отображаться должным образом, но это также может привести к активации нежелательного фрагмента сценария JS (например, поступающего из другого пользовательского ввода) .

Адоржан Принц
источник

2

По сути, $ ("# div"). Html использует element.innerHTML для установки содержимого, а $ ("# div"). Text (возможно) использует 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).

Сет
источник

2

$ ('. div'). html (val) установит значения HTML всех выбранных элементов, $ ('. div'). text (val) установит текстовые значения всех выбранных элементов.

Документы API для jQuery.text ()

Документы API для jQuery.html ()

Я предполагаю, что они соответствуют Node # textContent и Element # innerHTML соответственно. (Ссылки Gecko DOM).

Михель Калькман
источник

2

Ну, в простом смысле.

html () - получить внутренний html (теги html и текст).

text () - чтобы получить только текст, если присутствует внутри (только текст)

Mustkeem K
источник

1

Разное .html()оценивать как HTML, оценивать как .text()текст.
Рассмотрим блок 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'

Иллюстрация по этой ссылке http://api.jquery.com/text/

Паскаль Товохеры
источник

1

.text()даст вам фактический текст между тегами HTML. Например, текст абзаца междуp тегами. Интересно отметить, что он даст вам весь текст в элементе, на который вы нацеливаетесь с помощью вашего $селектора, плюс весь текст в дочерних элементах этого выбранного элемента. Так что, если у вас есть несколько pтегов с текстом внутри элемента body, и вы делаете $(body).text(), вы получите весь текст из всех абзацев. (Только текст, а не pсами теги.)

.html()даст вам текст и теги. Так $(body).html()что в основном даст вам всю страницу HTML-страницу

.val()работает для элементов, которые имеют valueатрибут, например input. An inputне содержит текст или HTML и, следовательно, .text()и.html() оба будут nullдля inputэлементов.

Фабиан Мадурай
источник

0

Я думаю, что разница в том, чтобы вставить тег HTML в text()вас тег HTML не функционирует

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

вывод :

You are registered <br> Mister name sourname

заменить text()наhtml()

вывод

You are registered
Mister name sourname

тогда тег <br>работает вhtml()

Дэвид
источник

1

Пожалуйста, исправьте свой ответ, первый фрагмент должен использовать text().

MKaama

0

текстовая функция устанавливает или извлекает значение в виде обычного текста, в противном случае функция HTML устанавливает или извлекает значение в виде HTML-тегов, чтобы изменить или изменить его. Если вы хотите просто изменить содержимое, используйте text (). Но если вам нужно изменить разметку, вы должны использовать hmtl ().

Это глупый ответ для меня после шести лет, не против.

Minhaz
источник

В чем разница между jQuery: text () и html ()?

Ответы:

Подвопрос: когда только текст, что быстрее `.text()`или `.html()`?

Где использовать:

Где не использовать:

Разница:

пример

В чем разница между jQuery: text () и html ()?

Ответы:

Подвопрос: когда только текст, что быстрее .text()или .html()?

Где использовать:

Где не использовать:

Разница:

пример

Подвопрос: когда только текст, что быстрее `.text()`или `.html()`?