Преобразование тегов в HTML сущности

Опубликовано: 21 мая 2017 / Обновлено: 6 января 2018
Раздел(ы): HTML & CSS, JAVA & PHP, WordPress, Вебмастеру
Просмотры: 5291
Комментарии: 0

Когда необходимо опубликовать исходный HTML код у себя в статье на сайте, то часто браузер указанный текст понимает как код, то есть выполняет его. Решить проблему должны специально выделенные для этого теги PRE и CODE. Но если у вас что-то пошло не так, то в этой статье я расскажу, как преобразовать HTML теги в сущности (в изображения), чтобы они не воспринимались браузером как команды.

Написание HTML тегов

Как известно все HTML теги начинаются с левой угловой скобки (знак меньше). Если ее заменить на ее код-сущность, то браузер уже не будет воспринимать дальнейший текст как код тега.

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

  • [exec]echo htmlspecialchars(«<", ENT_QUOTES);[/exec] на [exec]echo htmlspecialchars("<", ENT_QUOTES);[/exec]
  • [exec]echo htmlspecialchars(«>», ENT_QUOTES);[/exec] на [exec]echo htmlspecialchars(«>», ENT_QUOTES);[/exec]
  • [exec]echo htmlspecialchars(‘»‘, ENT_QUOTES);[/exec] на [exec]echo htmlspecialchars(«"», ENT_QUOTES);[/exec]
  • [exec]echo htmlspecialchars(«&», ENT_QUOTES);[/exec] на [exec]echo htmlspecialchars(«&», ENT_QUOTES);[/exec]

Таблица специальных символов и коды их сущностей

Символ (вид) Цифровой код HTML-код CSS-код Описание

<
&#60; &lt; \003C Знак «меньше чем» (начало тега)

>
&#62; &gt; \003E Знак «больше чем» (конец тега)

"
&#34; &quot; \0022 Двойная кавычка

&
&#38; &amp; \0026 Амперсанд

Теги PRE CODE XMP

Немного о тегах которые должны помочь, но не помогут или являются невалидными.
<pre> — «preformatted» — блочный элемент, который определяет блок предварительно форматированного текста.
<code> — строчный элемент, предназначенный для отображения одной или нескольких строк текста, который представляет собой программный код.
Эти теги оформляют текст, но не преобразуют его в сущности!!!

<xmp> — позволяет отображать фрагмент текста том виде, в каком он представлен внутри тега. Вот то что нам нужно для отображения сущностей! Но, к сожалению, он уже давно исключён из HTML-спецификации и его поддержка может быть прекращена любым браузером в любой момент.

PHP функции по преобразованию кода в сущности

Чтобы преобразовать код в сущности можно воспользоваться PHP функций htmlspecialchars(). Пример ее использования:

<?php
echo  htmlspecialchars("<div>HTML</div>", ENT_QUOTES); 
// <div>HTML</div> 
?>

Необязательный второй аргумент quote_style определяет режим обработки одиночных и двойных кавычек. В режиме по умолчанию, ENT_COMPAT, преобразуются двойные кавычки, одиночные остаются без изменений. В режиме ENT_QUOTES преобразуются и двойные, и одиночные кавычки. а в режиме ENT_NOQUOTES и двойные, и одиночные кавычки остаются без изменений.

Если у вас WordPress, то используйте функцию esc_html_e().

<?php esc_html_e('<div>HTML</div>'); //<div>HTML</div>?>

На экране в обоих случая будет выведено:

<div>HTML</div>

То есть код будет отображаться, а не выполняться.

Благодарности

При написании статьи были использованы следующие источники:

  1. https://html5book.ru/specsimvoly-html/
  2. https://puzzleweb.ru/html/html_symbols.php
  3. http://www.html.by/threads/15600-Vyvesti-HTML-kod-na-stranice-sajta
  4. http://htmlbook.ru/html/xmp
  5. https://wp-kama.ru/function/esc_html_e

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Нажимая кнопку "Отправить" Вы даёте свое согласие на обработку введенной персональной информации в соответствии с Федеральным Законом №152-ФЗ от 27.07.2006 "О персональных данных", на условиях и для целей определенных политикой конфиденциальности сайта.
© Юрий Рассадников, 2011 - 2024
uptime узнать
Домен : reg.ru
Хостинг : adman.com
SQL - 6 | 0,219 сек. | 13.91 МБ