Блог Веб-разработчика.

В процессе создания публикаций на сайте, особенно если сайт посвящен каким-то интернет технологиям, часто возникает потребность вставить листинг какого-либо кода прямо в статью. Но, не все редакторы позволяют это сделать корректно. Некоторые, небезосновательно, по соображениям безопасности, вырезают любые вставки кода, в результате кода в статье нет вообще или он сильно покарежен. Другие редакторы позволяют вставить, но при открытии статьи на фронтенде сайта – вставленный код иногда исполняется (если это, например, HTMl или JavaScript коды), даже если они находятся внутри специальных тегов, предназначенных для вывода листинга кодов (например в Joomla тег <pre xml:lang=«php»>…</pre> - внутри этого тега могут быть исполнены коды HTML разметки) и опять получаем не то что нужно…

А мы хотим просто видеть листинг кода. По-человечески. Вот в этой статье хочу предложить простую идею и, как результат, скрипт на основе нее, который позволит обрабатывать некоторые символы кода так, чтобы браузер или система сайта не воспринимала это как код и ни в коем случае его не вырезала и не исполняла. А выводила «текстом».

Идея.

Суть идеи довольна проста. Некоторые символы в тексте кода, имеют специальное значение и поэтому воспринимаются интерпретатором, например на стороне пользователя, к исполнению. К таким символам, например, относятся:  треугольные скобки «<» и «>», двойная и одинарная кавычка «”» и «’»  и знак амперсанд – «&». В тоже время, для этих символов, предусмотрены т.н. HTML-сущности или мнемоники (подробнее можно прочитать здесь: Мнемоники в HTML). Если спецсимволы кода преобразовать в эти самые HTML-сущности, то они сохранят свое исходное «текстовое» значение и не будут восприниматься интерпретатором как спецсимволы какого-либо кода. А это в свою очередь означает, что код, в котором эти спецсимволы заменены на мнемоники – исполняться не будет и мы сможем его увидеть в виде текста. Что нам, в данном случае, и нужно. На практике оказывается достаточным преобразовать в мнемоники перечисленные выше 5 символов.

В  php есть специальная функция, которая как раз этим и занимается, что преобразует указанные символы в их HTML-сущности, это:

htmlspecialchars()

Согласно документации (htmlspecialchars()) функция осуществляет следующие простые преобразования:

  • «&» преобразуется в '&amp;'
  • «"» преобразуется в '&quot;' в режиме ENT_NOQUOTES не преобразуется.
  • «'» преобразуется в '&#039;' только в режиме ENT_QUOTES.
  • «<» преобразуется в '&lt;'
  • «>» преобразуется в '&gt;'

Форма для работы.

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

<form action="ent.php" name="htmlspecialchars" method="post">
<textarea rows="20" style="width: 100%;" name="code">Введите сюда код, символы которого необходимо преобразовать, нажмите "преобразовать" - результат появится в окне ниже.</textarea><br/>
<input type="submit" value="Преобразовать в HTML-entites"/>
</form>
 
<textarea rows="20"  style="width: 100%;">
</textarea>

PHP-обработчик.

Теперь нужно подготовить php-код  непосредственно обработчика введенного кода. Он может быть например таким:

<?php
if (isset($_POST['code'])){
      $code = htmlspecialchars (htmlspecialchars ($_POST['code'],ENT_QUOTES));
      echo $code;
}
?>

Преобразование выполняется два раза по той причине, что если мы выполним его один раз, то из-за того что мы смотрим результат в браузере, он будет представлять собой точную копию введенного кода и если мы его скопируем и вставим в редактор нашей статьи – то это ничего не даст, так как спецсимволы не заменены на их HTML-сущности. Чтобы в самом браузере видеть видоизмененный код, необходимо преобразовать его два раза, так как браузер одно преобразование в процессе отображения как бы «затрет».

К тому же, на первом этапе преобразования вставим параметр «ENT_QUOTES» - это нужно чтбы преобразовывались на всякий случай и одинарные кавычки, и двойные.

Можно к этому коду добавить небольшое улучшение. Мы часто форматируем код отступами и правильным осмысленным переносом на новую строку – это делает код удобочитаемым. А при обработке функцией htmlspecialchars() знаки табуляции и переноса не преобразуются в какие либо сущности или коды html-разметки, а это значит что при отображении в браузере форматирование будет утеряно и код выведется одной строкой, читать которую не удобно. Поэтому добавим замену знаков табуляции «\t» на «&nbsp;» - отступ в html, а знаков переноса строки «\n» на тег html-переноса строки «<br/>». Тогда код примет вид:

<?php
if (isset($_POST['code'])){
      $code = htmlspecialchars (str_replace("\t","&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;",str_replace("\n","<br/>",htmlspecialchars ($_POST['code'],ENT_QUOTES))));
      echo $code;
}
?>

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

<?php if (isset($_POST['code'])) {echo htmlspecialchars ($_POST['code'],ENT_QUOTES);} else {echo "Введите сюда код, символы которого необходимо преобразовать, нажмите \"преобразовать\" - результат появится в окне ниже.";}?>

Итог.

Тогда итоговый код формы с обработчиком примет такой вид:

<form action="ent.php" name="htmlspecialchars" method="post">
<textarea rows="20" style="width: 100%;" name="code"><?php if (isset($_POST['code'])) {echo htmlspecialchars ($_POST['code'],ENT_QUOTES);} else {echo "Введите сюда код, символы которого необходимо преобразовать, нажмите \"преобразовать\" - результат появится в окне ниже.";}?></textarea><br/>
<div style="width: 198px; margin: 18px auto 0;">
<input type="submit" value="Преобразовать в HTML-entites"/>
</div>
</form>
<textarea rows="20"  style="width: 100%;">
<?php
if (isset($_POST['code'])){
      $code = htmlspecialchars (str_replace("\t","&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;",str_replace("\n","<br/>",htmlspecialchars ($_POST['code'],ENT_QUOTES))));
      echo $code;
}
?>
</textarea>

Вот и все готово. Можно форму использовать. Единственное – ее нужно только оформить по-красивому, но по традиции это делает каждый на свое усмотрение, так как дизайнер я плохой :).

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

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

Комментарии к статье:


Всеволод Чупрыгин © webengineer.pro 2014. Все права защищены.
Копирование материалов сайта разрешено только с указанием имени автора (Всеволод Чупрыгин) и прямой индексируемой ссылки на источник на сайте www.WebEngineer.pro.
ИП Чупрыгин Всеволод Андреевич, ИНН: 333410747832, ОГРН: 311333426300044
http://vkontakte.ru/chuprygin_va, Google +

.
Проверить аттестат
Мы принимаем Webmoney Мы принимаем практически все платежи через Robokassa Мы принимаем Яндекс.Деньги Мы принимаем платежи через QIWI. Мы принимаем платежи через привязанные к QIWI карты VISA/Mastercard.