HTML-сущности и URL encode/decode: экранировать текст

Запись и расшифровка HTML-сущностей ( ,  ,  ), URL encode и decode: пробел как %20 или +, разбор адресов построчно. JSON, JavaScript, Unicode — в браузере.

Формат и направление

Теги и амперсанды в тексте страницы: <div> → &lt;div&gt;

Заменить опасные символы безопасными последовательностями

Меняются только &, <, >, " и апостроф

Код символа числом: неразрывный пробел → &#160;

Дополнительно
Пробелы — неразрывнымиСерия пробелов сохранится: браузер схлопывает её в один, а неразрывные останутся. Переносы строк не меняются

Исходный текст

Результат

Начните вводить текст — результат появится сам

Справочник HTML-сущностей

Частые сущности с кодами. «Вставить» добавляет сущность в текст, «Копировать» кладёт её в буфер обмена

Показано 27 из 27

Частые HTML-сущности: имя, символ, код и пояснение
СущностьСимволКодЧто этоДействия
&nbsp; 160 · U+00A0неразрывный пробел — браузер не переносит строку в этом месте
&amp;&38 · U+0026амперсанд, начало любой ссылки
&lt;<60 · U+003Cзнак «меньше», он же открывающая угловая скобка тега
&gt;>62 · U+003Eзнак «больше», он же закрывающая угловая скобка тега
&quot;"34 · U+0022двойная кавычка
&apos;'39 · U+0027апостроф, он же одинарная кавычка
&copy;©169 · U+00A9знак охраны авторского права
&reg;®174 · U+00AEзарегистрированный товарный знак
&trade;8482 · U+2122знак торговой марки
&mdash;8212 · U+2014длинное тире
&ndash;8211 · U+2013короткое тире, оно же цифровое
&minus;8722 · U+2212математический минус — шире дефиса
&laquo;«171 · U+00ABоткрывающая ёлочка
&raquo;»187 · U+00BBзакрывающая ёлочка
&ldquo;8220 · U+201Cоткрывающая двойная лапка
&rdquo;8221 · U+201Dзакрывающая двойная лапка
&hellip;8230 · U+2026многоточие одним символом
&deg;°176 · U+00B0знак градуса
&times;×215 · U+00D7знак умножения
&divide;÷247 · U+00F7знак деления
&plusmn;±177 · U+00B1плюс-минус
&middot;·183 · U+00B7средняя точка, разделитель в списках
&bull;8226 · U+2022маркер пункта списка
&sect;§167 · U+00A7знак параграфа
&para;182 · U+00B6знак абзаца
&euro;8364 · U+20ACзнак евро
&permil;8240 · U+2030знак промилле

Зачем экранировать текст

Один и тот же текст живёт в разных мирах и в каждом подчиняется своим правилам. Угловая скобка в HTML начинает тег, кавычка в JSON закрывает строку, обратный слэш в JavaScript открывает escape-последовательность, а пробел в адресе недопустим вовсе. Экранирование — это способ сказать «это просто символ» на языке того формата, куда текст попадает, и ошибиться тут легко: незакрытая кавычка ломает файл целиком, а не одну строку.

Инструмент закрывает весь круг этих задач в одном месте: HTML и XML, строка для JSON и для JavaScript, адрес и его параметры, запись символов через код Unicode. У ссылок на символ выбирается форма записи — десятичная (&#160;), шестнадцатеричная (&#xA0;) или именованная (&nbsp;), — а справочник под таблицей подсказывает имя и код частого символа и умеет вставить его прямо в текст. У адресов свои настройки: чем записать пробел, какие символы не кодировать, разбирать ли список построчно. Направление переключается списком, есть и автоопределение, а кнопка «Поменять местами» делает обратную операцию одним нажатием — так видно, что текст восстанавливается без потерь.

Под результатом видно, что именно изменилось: сколько мест заменено, какие символы и во что именно они превратились, а также подсветка прямо в готовом тексте. Это отвечает на главный вопрос при копировании текста между форматами — не поехало ли что-то, о чём я не думал.

Частые вопросы

Что такое HTML-сущности и как заэкранировать теги?

HTML-сущность — это запись символа, которую браузер покажет как знак, а не как часть разметки. Выберите формат «HTML» и направление «Экранировать»: угловые скобки станут &lt; и &gt;, амперсанд — &amp;, кавычки — &quot; и &#39;. Уровень «Всё не-ASCII» заменяет ссылками ещё и все буквы вне латиницы, а форма ссылок задаёт их вид: десятичный (&#1055;), шестнадцатеричный (&#x41F;) или именованный (&nbsp;) там, где имя есть. В XML всё то же самое, но апостроф записывается именованной ссылкой &apos;.

Как декодировать HTML-сущности (html entities)?

Направление «Разэкранировать» читает все три вида ссылок: именованные (&nbsp;, &copy;, &laquo;), десятичные (&#160;) и шестнадцатеричные (&#xA0;), причём регистр букв в коде не важен. Неизвестная или битая ссылка остаётся в тексте как есть: так опечатка видна, а не превращается в пропавший символ. Имён в HTML больше двух тысяч, поэтому в разбор включены частые — типографика, валюта, математика, стрелки, греческий алфавит, — а любой другой символ однозначно записывается числовым кодом.

Чем заменить &nbsp;?

Зависит от того, зачем он стоит. Нужен обычный пробел — ставьте обычный пробел или &#32;. Нужно, чтобы браузер не схлопнул серию пробелов и не перенёс строку в этом месте, — значит, &nbsp; и нужен: он же &#160;, &#xA0;, U+00A0. Сохранить пробелы можно и без разметки: white-space: pre-wrap в CSS. Инструмент умеет и обратное — флажок «Пробелы — неразрывными» заменяет пробелы на &nbsp;, — а при разэкранировании &nbsp; становится именно неразрывным пробелом, а не обычным: выглядит он так же, а переносится иначе.

Как закодировать пробел в URL: %20 или +?

Оба варианта верны, но в разных местах. %20 универсален: он работает и в пути адреса, и в значении параметра, и его понимает любой сервер. Плюс означает пробел только в query-строке формы (application/x-www-form-urlencoded), а в пути адреса плюс — это плюс. Переключатель «Пробел записывать плюсом» выбирает запись, по умолчанию пробел уходит в %20. При раскодировании есть парный флажок «Считать + пробелом»: он нужен для строк вида ?q=привет+мир, а закодированный %2B остаётся плюсом в любом случае.

Как раскодировать ссылку (url decode)?

Выберите формат «URL», направление «Разэкранировать» и уровень. «Значение параметра» использует decodeURIComponent и раскодирует всё, включая %2F и %3F; «Адрес целиком» использует decodeURI и оставляет служебные %2F, %3F и %23 закодированными, чтобы не развалить структуру адреса. Если непонятно, закодирован текст или нет, поставьте «Определить автоматически»: инструмент решит это сам и напишет, что выбрал. Некорректные последовательности процентов остаются как есть. При обратном кодировании помогает список «Не кодировать символы»: он оставляет перечисленные знаки как есть, даже если уровень их кодирует, — можно оставить :/?&=#, и адрес останется узнаваемым, а буквы и пробелы всё равно уйдут в проценты. Список сильнее уровня, но не отменяет запись пробела плюсом.

Что значит «Каждая строка — отдельно»?

Инструмент обрабатывает каждую строку списка самостоятельно, а переносы оставляет переносами. Без этого флажка перенос строки — обычный символ: в URL он превращается в %0A, в JSON и JavaScript — в \n, и список адресов слипается в одну строку. С флажком можно вставить сотню адресов по одному в строке и получить столько же строк в результате. Направление при автоопределении выбирается один раз на весь список, а не на каждую строку.

Данные отправляются на сервер?

Нет. Экранирование и разэкранирование считаются целиком в браузере на JavaScript: текст не передаётся никуда и не сохраняется. Инструментом можно пользоваться офлайн, а исходники вроде ключей или паролей остаются на вашем компьютере.