Отображать фрагменты HTML в HTML

208

Как я могу показать фрагменты HTML на веб-странице, не заменяя каждый <на &lt;и >на &gt;?

Другими словами, есть ли тег для не отображать HTML, пока вы не нажмете закрывающий тег ?

Стивен
источник

Ответы:

95

Нет , нет В собственно HTML нет возможности избежать некоторых символов:

  • & так как &amp;
  • < так как &lt;

(Между прочим, бежать не нужно, >но люди часто делают это по соображениям симметрии.)

И, конечно, вы должны окружить полученный, экранированный HTML-код, <pre><code>…</code></pre>чтобы (а) сохранить пробелы и разрывы строк, и (б) пометить его как элемент кода.

Все другие решения, такие как упаковка вашего кода в элемент ( <textarea>или устаревший) <xmp>, будут сломаны . 1

XHTML , который объявлен в браузер в виде XML (через HTTP Content-Typeзаголовок - просто установив! DOCTYPEЭто не достаточно ) в качестве альтернативы может использовать секцию CDATA:

<![CDATA[Your <code> here]]>

Но это работает только в XML, а не в HTML, и даже это не является надежным решением, поскольку код не должен содержать закрывающий разделитель ]]>. Так что даже в XML самое простое и надежное решение - через экранирование.


1 Показательный пример:

Конрад Рудольф
источник
Ницца. Так что это часть стандарта HTML? Или это глубже, как часть xml-стандарта?
aioobe
7
В HTML это будет отображаться `здесь]]>`
Dolph
3
Да, это хороший ответ, но не забудьте заменить его >на &gt;
Алан
2
@ Алан, я бы тоже это сделал, но на самом деле это не нужно : только <и &нужно заменить, неэкранированный >действителен внутри HTML.
Конрад Рудольф
1
@SamWatkins Но ваше решение не легче, чем мое . Вы только что изменили то, что нужно избежать, и ваше решение, как вы признаете, является хакерским. Нет буквального преимущества перед тем, как делать это правильно. Это решенная проблема с правильным решением. Нет необходимости во взломах, если только ваша настройка не является хакерской.
Конрад Рудольф
161

Испытанный и верный метод для HTML:

  1. Заменить &персонажа на&amp;
  2. Заменить <персонажа на&lt;
  3. Заменить >персонажа на&gt;
  4. При желании окружите ваш образец HTML тегами <pre>и / или <code>.
Дольф
источник
17
Совет: для ускорения замены HTML-кода вы можете использовать Notepad ++ с расширением «TextFX». Выделите текст, перейдите в меню> TextFX> Преобразование TextFX> Кодировать HTML (& <> ") → Готово.
Кай Ноак,
2
Существует ли какая-либо библиотека JavaScript, которая может это сделать случайно?
Андерсон Грин
9
Это не отвечает на вопрос, который гласил «без необходимости замены ...». Кроме того, замена «>» не нужна.
Юкка К. Корпела
2
И порядок тоже важен. Убедитесь, что вы справляетесь с &первым и <после.
Tolga Evcimen
151

лучший способ:

<xmp>
// your codes ..
</xmp>

старые образцы:

образец 1 :

<pre>
  This text has
  been formatted using
  the HTML pre tag. The brower should
  display all white space
  as it was entered.
</pre>

образец 2 :

<pre>
  <code>
    My pre-formatted code
    here.
  </code>
</pre>

Пример 3 : (Если вы на самом деле «цитируете» блок кода, то разметка будет)

<blockquote>
  <pre>
    <code>
        My pre-formatted "quoted" code here.
    </code>
  </pre>
</blockquote>

хороший пример CSS:

pre{
  font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
  margin-bottom: 10px;
  overflow: auto;
  width: auto;
  padding: 5px;
  background-color: #eee;
  width: 650px!ie7;
  padding-bottom: 20px!ie7;
  max-height: 600px;
}

Код подсветки синтаксиса (для профессиональной работы):

радуга (очень идеально)

принаряжать

syntaxhighlighter

основной момент

JSHighlighter


лучшие ссылки для вас:

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-add-syntax-highlighting-to-any-project/

https://github.com/balupton/jquery-syntaxhighlighter

http://bavotasan.com/2009/how-to-wrap-text-within-the-pre-tag-using-css/

http://alexgorbatchev.com/SyntaxHighlighter/

https://code.google.com/p/jquery-chili-js/

Как выделить исходный код в HTML?

Эрфан Сафарпур
источник
4
Элементы, используемые в ответе, вообще не затрагивают вопрос: они не влияют на интерпретацию «<», начинающего тег.
Юкка К. Корпела
7
developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp говорит: « Не используйте этот элемент . Он устарел с HTML3.2 и не был реализован согласованным образом. Он был полностью удален из язык в HTML5. "
Ник Райс
50

Вид наивного метода для отображения кода будет включать его в текстовое поле и добавлять атрибут disabled, чтобы он не редактировался.

<textarea disabled> code </textarea>

Надеюсь, что помочь кому-то ищет легкий способ сделать вещи ..

Krunal
источник
7
Readonly может быть лучшим атрибутом, чем отключен, так как вы можете выделить текст внутри него. Также возможно добавление стиля, который лишает его любых функций, которые делают его похожим на элемент ввода, хотя это вторично.
Tarquin
2
Отличное решение. Спасибо
Апит Джон Исмаил
1
Амперсанды все равно будут интерпретироваться. например, & nbsp; будет отображаться как фактический неразрывный пробел. Но хороший ответ, тем не менее, идеально подходит для того, что я хочу сделать.
Ник Райс
1
Я пробовал много способов, и это единственный способ, который работает для меня. Большое спасибо.
Уильям Хоу
25

Устаревший , но работает в FF3 и IE8.

<xmp>
   <b>bold</b><ul><li>list item</li></ul>
</xmp>

Рекомендуемые:

<pre><code>
    code here, escape it yourself.
</code></pre>
s_hewitt
источник
12

По существу устаревший <xmp>тег делает это, но больше не является частью спецификации XHTML. Это должно все еще работать, хотя во всех текущих браузерах.

Вот еще одна идея, хитрый прием, вы можете поместить код в текстовое поле следующим образом:

<textarea disabled="true" style="border: none;background-color:white;">
    <p>test</p>
</textarea>

Размещение угловых скобок и подобного кода внутри текстовой области является недопустимым HTML и приведет к неопределенному поведению в разных браузерах. В Internet Explorer интерпретируется HTML-код, тогда как Mozilla, Chrome и Safari оставляют его без интерпретации.

Если вы хотите, чтобы он не редактировался и выглядел по-другому, вы можете легко оформить его с помощью CSS. Единственная проблема заключается в том, что браузеры добавят эту маленькую ручку перетаскивания в нижнем правом углу, чтобы изменить размер окна. Или, альтернативно, попробуйте вместо этого использовать тег ввода.

Правильный способ внедрить код в вашу текстовую область - это использовать язык на стороне сервера, такой как этот PHP, например:

<textarea disabled="true" style="border: none;background-color:white;">
    <?php echo '<p>test</p>'; ?>
</textarea>

Затем он обходит интерпретатор html и помещает неинтерпретированный текст в текстовую область последовательно во всех браузерах.

Кроме этого, единственный способ действительно избежать кода самостоятельно, если используется статический HTML, или использовать методы на стороне сервера, такие как .NET HtmlEncode (), при использовании такой технологии.

GShenanigan
источник
1
это ужасная идея Что делать, если отображается динамический HTML, и кто-то сделал следующее. <? php echo '</ textarea> <script> alert (\' hello world \ '); </ script> <textarea>'; />. Поэтому ваш код уязвим для xss.
Гэри Дрочелла,
PHP на стороне сервера, поэтому он не меняет результат, видимый браузером. Особенно это не обходит интерпретатор HTML.
Роберт Симер
Мне нравится форматирование текстовой области, чтобы оно не выглядело как поле ввода. Я также добавляю ширину 100%, чтобы уменьшить упаковку:<textarea disabled="true" style="border: none;background-color:white; width:100%">
Дэн Кинг
@GaryDrocella, если вы вставите теги <script> в tetarea, они преобразуются в & lt; и & gt; автоматически, поэтому сценарий никогда не выполняется
bluejayke
6

В HTML? Нет.

В XML / XHTML? Вы могли бы использовать CDATAблок.

Клетус
источник
6

Это очень просто .... Используйте этот код xmp

    <xmp id="container">

&lt;xmp &gt;

    <p>a paragraph</p>

    &lt;/xmp &gt;

</xmp>
Kamlesh
источник
6

Я предполагаю:

  • Вы хотите написать 100% действительный HTML5
  • Вы хотите поместить фрагмент кода (почти) литерал в HTML
    • особенно <не нужно убегать

Все ваши варианты в этом дереве:

  • с синтаксисом HTML
    • Есть пять видов элементов
    • так называемые "нормальные элементы" (вроде <p>)
      • не может иметь буквальный <
      • это будет считаться началом следующего тега или комментария
    • пустые элементы
      • у них нет контента
      • Вы можете поместить свой HTML в атрибут данных (но это верно для всех элементов)
      • для перемещения данных в другое место потребуется JavaScript
      • в двойных кавычках, "и &thing;нужно экранировать: &quot;и &amp;thing;соответственно
    • необработанные текстовые элементы
      • <script>и <style>только
      • они никогда не оказываются видимыми
      • но встраивание вашего текста в Javascript может быть целесообразным
      • Javascript допускает многострочные строки с обратными галочками
      • затем он может быть вставлен динамически
      • Буква </scriptне допускается нигде в<script>
    • экранируемые текстовые элементы
      • <textarea>и <title>только
      • <textarea> хороший кандидат для переноса кода в
      • это совершенно законно , чтобы написать </html>там
      • не легальная подстрока </textareaпо понятным причинам
        • избежать этого особого случая с &lt;/textareaили аналогичным
      • &thing; необходимо избежать: &amp;thing;
    • посторонние элементы
      • элементы из пространств имен MathML и SVG
      • по крайней мере SVG позволяет снова встраивать HTML ...
      • и CDATA там разрешено, так что, кажется, есть потенциал
  • с синтаксисом XML

 

Примечание: >никогда не нужно убегать. Даже в нормальных элементах.

Роберт Симер
источник
1
Мне нравится комплексный подход вашего ответа. Несколько исправлений: <script>и <style>могут быть сделаны различимыми, а просто поместить их внутри <body>с style="display: block; white-space: pre;"и type="text/html"или что - то , если вы не хотите, чтобы это было выполнено в JavaScript. Я думаю, это довольно хороший трюк, подходящий для грамотного программирования и обучения. Также <xmp>по-прежнему реализован в основных браузерах, хотя это устарело.
Сэм Уоткинс
Интересный. @SamWatkins <xmp>не является допустимым HTML5, но другой трюк выглядит правильно!
Роберт Симер
5

Если ваша цель - показать фрагмент кода, который вы выполняете в другом месте на той же странице, вы можете использовать textContent (это pure-js и хорошо поддерживается: http://caniuse.com/#feat=textcontent )

<div id="myCode">
    <p>
        hello world
    </p>
</div>

<div id="loadHere"></div>


document.getElementById("myCode").textContent = document.getElementById("loadHere").innerHTML;

Чтобы получить многострочное форматирование в результате, вам нужно установить стиль css "white-space: pre;" на целевом div, и пишите строки индивидуально, используя «\ r \ n» в конце каждого.

Вот демоверсия: https://jsfiddle.net/wphps3od/

Этот метод имеет преимущество перед использованием текстовой области: код не будет переформатирован, как в текстовой области. (Такие вещи, как &nbsp;полностью удалены в текстовой области)

Тимоти Кански
источник
Это довольно хороший подход - использовать JavaScript и DOM API для нас. Мы могли бы использовать его вместе с <template>или что-то, что обычно не отображается.
Сэм Уоткинс
3

В конечном счете, лучший (хотя и раздражающий) ответ - «избежать текста».

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

Быстрый поиск Google показывает мне это, например: http://malektips.com/zzee-text-utility-html-escape-regular-expression.html

Стивен Р
источник
3
<textarea ><?php echo htmlentities($page_html); ?></textarea>

у меня работает нормально ..

«Имея в виду Alexander'sпредложение, вот почему я думаю, что это хороший подход»

если мы просто попробуем обычный метод, то <textarea>это может не всегда работать, поскольку могут быть закрывающие textareaтеги, которые могут неправильно закрывать родительский тег и отображать остальную часть исходного кода HTML в родительском документе, что будет выглядеть неловко.

Использование htmlentitiesпреобразует все применимые символы, такие как < >объекты HTML, что исключает любую возможность утечки.

Возможно, у этого подхода есть преимущества или недостатки или лучший способ достижения тех же результатов, если так, пожалуйста, прокомментируйте, как я хотел бы учиться у них :)

Anupam
источник
2
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, как и почему он решает проблему, улучшит долгосрочную ценность ответа.
Александр
1
Если вы используете htmlentities (), то <textarea> становится избыточным. Просто поместите это в div или что-то. ОП не предложил, чтобы они вообще использовали PHP.
Ник Райс
@ Ник, да, ну, по моему мнению, textarea служит естественным контейнером, поскольку он автоматически добавляет полосы прокрутки и прочее, что в противном случае требует стилизации, если мы поместим его в div чего-то ..
Anupam
2

Вы можете использовать серверный язык, такой как PHP, для вставки необработанного текста:

<?php
  $str = <<<EOD
  <html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Minimal HTML5">
    <meta name="keywords" content="HTML5,Minimal">
    <title>This is the title</title>
    <link rel='stylesheet.css' href='style.css'>
  </head>
  <body>
  </body>
  </html>
  EOD;
?>

затем $strвыведите значение htmlencoded:

<div style="white-space: pre">
  <?php echo htmlentities($str); ?>
</div>
КТА
источник
2

Это простой трюк, и я пробовал его в Safari и Firefox

<code>
    <span><</span>meta property="og:title" content="A very fine cuisine" /><br>
    <span><</span>meta property="og:image" content="http://www.example.com/image.png" />
</code>

Это покажет так:

введите описание изображения здесь

Вы можете увидеть это в прямом эфире здесь

Ramtin
источник
2

На самом деле это способ сделать это. Он имеет ограничение (один), но на 100% стандартно, не устарел (как xmp) и работает.

И это тривиально. Вот:

<div id="mydoc-src" style="display: none;">
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo
</div>

Пожалуйста, позвольте мне объяснить. Прежде всего, обычный HTML-комментарий делает работу, чтобы предотвратить интерпретацию всего блока. Вы можете легко добавить в него любые теги, все они будут игнорироваться. Игнорируется при интерпретации, но все еще доступно через innerHTML! Так что осталось получить содержимое и отфильтровать предыдущие и конечные токены комментариев.

За исключением (помните - ограничение) вы не можете поместить туда комментарии HTML внутри, так как (по крайней мере, в моем Chrome) их вложение не поддерживается, и самое первое '->' завершит показ.

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

Теперь, что это за странная LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJoстрока? Это случайная строка, похожая на хеш, которая вряд ли будет использоваться в блоке и используется для? Вот контекст, почему я его использовал. В моем случае я взял содержимое одного DIV, затем обработал его с помощью разметки Showdown, а затем вывод, назначенный в другой div. Идея заключалась в том, чтобы написать встроенную уценку в файле HTML и просто открыть в браузере, и она будет преобразовываться при загрузке на лету. Так что, в моем случае, <!--трансформировался в <p><!--</p>, комментарий правильно избежал. Работало, но загрязняло экран. Таким образом, чтобы легко удалить его с помощью регулярного выражения, была использована случайная строка. Вот код:

    var converter = new showdown.Converter();
    converter.setOption('simplifiedAutoLink', true);
    converter.setOption('tables', true);
    converter.setOption('tasklists', true);
    var src = document.getElementById("mydoc-src");
    var res = document.getElementById("mydoc-res");
    res.innerHTML = converter.makeHtml(src.innerHTML)
            .replace(/<p>.{0,10}LlNnlljn77fggggkk77csJJK8bbJBKJBkjjjjbbbJJLJLLJo.{0,10}<\/p>/g, "");
    src.innerHTML = '';

И это работает.

Если кому-то интересно, эта статья написана с использованием этой техники. Не стесняйтесь скачать, и загляните внутрь HTML-файла.

Это зависит от того, для чего вы его используете. Это пользовательский ввод? Тогда используйте <textarea>и избегайте всего. В моем случае, и, вероятно, это тоже ваш случай, я просто использовал комментарии, и это делает свою работу.

Если вы не используете уценку и просто хотите получить ее как есть из тега, то это еще проще:

<div id="mydoc-src" style="display: none;">
<!--
YOUR CODE HERE.
    <script src="WidgetsLib/all.js"></script>
    ^^ This is a text, no side effects trying to load it.
-->
</div>

и код JavaScript, чтобы получить его:

    var src = document.getElementById("mydoc-src");
    var YOUR_CODE = src.innerHTML.replace(/(<!--|-->)/g, "");
Леонид Титов
источник
1

Есть несколько способов избежать всего в HTML, ни один из них не хорош.

Или вы можете вставить в него iframeзагрузку простого старого текстового файла.

BCS
источник
1

На данный момент это лучший метод для большинства ситуаций:

<pre><code>
    code here, escape it yourself.
</code></pre>

Я бы проголосовал первым, кто предложил это, но у меня нет репутации. Я был вынужден что-то сказать ради людей, пытающихся найти ответы в Интернете.

xdaxdb
источник
1

Вот как я это сделал:

$str = file_get_contents("my-code-file.php");
echo "<textarea disabled='true' style='border: none;background-color:white;'>";
echo $str;
echo "</textarea>";
techiegirl
источник
этот код уязвим для xss. каждый может установить $ str = "</ textarea> <textarea>"
Гэри Дрочелла
Привет, это вполне может решить проблему ... но было бы хорошо, если бы вы могли дать небольшое объяснение о том, как и почему это работает :) Не забывайте - на переполнении стека есть куча новичков, и они могли бы научиться вещь или два из вашего опыта - то, что для вас очевидно, может быть не так для них.
Тарын Ист
1
function escapeHTML(string)
    { 
        var pre = document.createElement('pre');
        var text = document.createTextNode(string);
        pre.appendChild(text);
        return pre.innerHTML;
}//end escapeHTML

он вернет сбежавший HTML

Говинд Сингх
источник
0

Это может не работать в каждой ситуации, но размещение фрагментов кода внутри textareaбудет отображать их как код.

Вы можете стилизовать текстовую область с помощью CSS, если не хотите, чтобы она выглядела как настоящая текстовая область.

Дрю Томас
источник
0

Это немного взломать, но мы можем использовать что-то вроде:

body script {
    display: block;
    font-family: monospace;
    white-space: pre;
}
<script type="text/html">
<h1>Hello World</h1>

<ul>
    <li>Enjoy this dodgy hack,
    <li>or don't!
</ul>
</script>

С этим CSS браузер будет отображать скрипты внутри тела. Он не будет пытаться выполнить этот скрипт, так как он имеет неизвестный тип text/html. Нет необходимости экранировать специальные символы внутри a <script>, если только вы не хотите включить закрывающий </script>тег.

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

В этом вопросе есть дополнительная информация. Когда теги должны быть видны и почему они могут быть? ,

Сэм Уоткинс
источник
-1
 //To show xml tags in table columns you will have to encode the tags first

function htmlEncode(value) {
    //create a in-memory div, set it's inner text(which jQuery automatically encodes)
    //then grab the encoded contents back out.  The div never exists on the page.
    return $('<div/>').text(value).html();
}

html = htmlEncode(html)
Preetika
источник
-2

Комбинация пары ответов, которые работают здесь вместе:

function c(s) {
    return s.split("&lt;").join("<").split("&gt;").join(">").split("&amp;").join("&")
}

displayMe.innerHTML = ok.innerHTML;
console.log(
  c(ok.innerHTML)
)
<textarea style="display:none" id="ok">
<script>
console.log("hello", 5&9);
</script>
</textarea>
<div id="displayMe">

</div>

bluejayke
источник