#javascript #html
#javascript #HTML
Вопрос:
Я хочу, чтобы HTML, например, <p> , отображал show именно так, в виде обычного текста, а не интерпретировался браузером как фактический тег.
Я знаю, что в jQuery есть .html и .text, но как это делается в raw JS?
Существуют такие функции, как encodeURIComponent, которые кодируют <p> в
, но если я просто помещаю это в HTML, оно интерпретирует это буквально как
.
Итак, есть также такие вещи, как amp;> и amp;< , они работают, но я не могу найти никаких функций JavaScript, которые избегали бы этого.
Есть ли правильный способ отобразить HTML в виде текста с помощью необработанного JavaScript?
Комментарии:
1. Я лично использую устаревший, но рабочий тег XMP вот так:
document.getElementById('someDiv').innerHTML='<xm' 'p><h1>Here is some <i>HTML</i></h1></xmp>'
Ответ №1:
Нет необходимости экранировать символы. Просто используйте createTextNode :
var text = document.createTextNode('<p>Stuff</p>');
document.body.appendChild(text);
Смотрите рабочий пример здесь:http://jsfiddle.net/tZ3Xj /.
Именно так это делает jQuery (строка 43 jQuery 1.5.2):
return this.empty().append( (this[0] amp;amp; this[0].ownerDocument || document).createTextNode( text ) );
Комментарии:
1. Знаете ли вы, почему Prototype будет делать это так, как они есть, если этот (более привлекательный) метод работает?
2. @thirtydot, использует ли Prototype экранирование при вставке текста в DOM или это просто служебная функция? Я могу представить, как избежать его использования в другом месте.
3. Может быть, createTextNode сам выполняет экранирование? В любом случае, это та функция, которая мне нужна. Спасибо.
4. .innerText создаст и добавит текстовый узел для вас.
Ответ №2:
Функция, используемая Prototype, выглядит как хорошее начало:
http://www.prototypejs.org/api/string/escapeHTML
function escapeHTML() {
return this.replace(/amp;/g,'amp;amp;').replace(/</g,'amp;<').replace(/>/g,'amp;>');
}
Версия, более подходящая для использования вне прототипа:
function escapeHTML(html) {
return html.replace(/amp;/g,'amp;amp;').replace(/</g,'amp;<').replace(/>/g,'amp;>');
}
Ответ №3:
Вы можете использовать aslo innerText из большинства элементов DOM:
document.getElementById('some').innerText = "There can be <b> even HTML tags </b>";
Теги не будут отформатированы. Вы также можете использовать n для новой строки и других кодов ( t , u2623 …). Если вы хотите, чтобы aslo использовал символы фиксированного размера, вы можете использовать тег easy <pre> .
Ответ №4:
Это задание для метода createTextNode
var target div = document.getElementById('div1');
targetDiv.appendChild(document.createTextNode('<p>HelloWorld</p>'));
Ответ №5:
я предлагаю использовать предварительный тег html
и вы можете преобразовать свой, используя эту ссылку
например, если вы копируете
<p>Hi </p>
это даст вам преобразованный код в виде…
amp;<pamp;>Hi amp;</pamp;>
Просто скопируйте и вставьте приведенный выше код в pre, и он будет работать нормально…