tigtools

Кодувальник і декодувальник HTML-сутностей

Підготуйте текст для вставлення в HTML або перетворіть сутності, як-от & і é, назад на звичайні символи.

Працює у вашому браузері Без реєстрації

Напрямок

Символи & < > " і ' екрануються завжди. Інші символи перетворюються лише за вибраної опції для символів поза ASCII.

Як користуватися

  1. Виберіть «Кодувати», щоб підготувати текст для HTML, або «Декодувати», щоб перетворити сутності назад на символи.
  2. Під час кодування виберіть, чи залишати літери з діакритикою та символи без змін, чи перетворювати їх на сутності.
  3. Введіть або вставте текст — результат оновиться миттєво.
  4. Скопіюйте результат або натисніть «Використати результат як вхідні дані», щоб перевірити, чи декодується він назад до початкового тексту.

Як це працює

У HTML деякі символи мають спеціальне значення: < починає тег, & починає сутність, а " або ' завершують значення атрибута. Щоб відобразити їх як текст, потрібно записати їх як посилання на символи: &lt; для <, &gt; для >, &amp; для &, &quot; для " і &#39; для '. Для апострофа використовується числовий запис, оскільки &apos; не визначено в HTML 4.

Усі інші символи, зокрема літери з діакритичними знаками, китайський текст та емодзі, можна записувати безпосередньо, якщо сторінку збережено й передано в кодуванні UTF-8, яке є стандартним для сучасних сайтів. Перетворювати їх на сутності потрібно лише для систем, що не підтримують UTF-8, наприклад деяких старих шаблонів електронних листів або баз даних. Тоді можна вибрати іменовані сутності, наприклад &eacute; (якщо для символу є поширена назва; для інших використовуватиметься числовий запис), або числові посилання на кшталт &#xE9; для кожного символу.

Декодування не використовує HTML-парсер браузера. Натомість використовується вбудована таблиця з усіма 252 іменованими сутностями HTML 4.01, &apos; і приблизно 30 поширеними назвами HTML5, а також десятковими й шістнадцятковими посиланнями. Числові посилання обробляються за правилами HTML5: &#0;, сурогатні значення та значення понад U+10FFFF перетворюються на символ заміни �, а значення 128–159 інтерпретуються як Windows-1252, тож &#150; стає коротким тире. Також приймаються деякі застарілі назви, як-от &amp і &copy, без крапки з комою наприкінці — так само, як у браузерах. У HTML5 визначено понад 2 000 назв; рідкісні назви, яких немає в таблиці, залишаються без змін і відображаються у списку.

Екранування тексту перед вставленням у HTML — важливий захист від міжсайтового скриптингу (XSS), але він підходить лише для вмісту елементів і значень атрибутів у лапках. Для тексту всередині блока <script>, атрибута style або URL потрібен інший спосіб екранування.

Приклади

Відображення коду на вебсторінці

Щоб показати <div class="box"> як текст у дописі блогу, перетворіть його на &lt;div class=&quot;box&quot;&gt;. Браузер покаже початковий тег як текст, а не створить елемент.

Підготовка тексту для старого шаблону електронного листа

За параметра «Іменовані сутності, якщо доступні» текст «Café – 5 €» перетворюється на Caf&eacute; &ndash; 5 &euro;. Він відображатиметься правильно, навіть якщо лист надіслано в кодуванні, відмінному від UTF-8.

Очищення скопійованого або експортованого тексту

В експорті з CMS є Fish &amp; Chips &#8211; &pound;9. Декодування дає Fish & Chips – £9 — текст готовий до вставлення в таблицю.

Поширені запитання

Які символи потрібно екранувати в HTML?

У вмісті елемента потрібно екранувати символи & і < (також рекомендовано >). У значеннях атрибутів екрануйте ще й символ лапок, якими взято значення. Просте й безпечне правило, якого дотримується цей інструмент, — екранувати всі п’ять символів (& < > " ') у будь-якому контексті.

Чим відрізняються іменовані та числові сутності?

Іменовані сутності, як-от &copy;, легше читати, але вони існують лише для обмеженого набору символів. Числові посилання, як-от &#169; (десяткове) або &#xA9; (шістнадцяткове), працюють для будь-якого символу Unicode, зокрема емодзі.

Чому після декодування &nbsp; виглядає як пробіл?

&nbsp; — це нерозривний пробіл (U+00A0). Він виглядає як звичайний пробіл, але не дає переносити рядок і не згортається в HTML. Це інший символ, ніж звичайний пробіл, що важливо під час порівняння та пошуку тексту.

Чи потрібно кодувати літери з діакритикою, як-от é?

Ні, якщо сторінка використовує UTF-8 (<meta charset="utf-8">), як і майже всі сучасні сторінки. Залиште типове налаштування — екрануватимуться лише п’ять спеціальних символів.

Чи достатньо кодування, щоб запобігти XSS?

Цього достатньо для недовіреного тексту, який вставляється у вміст HTML-елемента або взяті в лапки значення атрибутів. Але цього недостатньо для коду JavaScript, CSS, атрибутів без лапок або URL-адрес, як-от href="javascript:…" — для них потрібна обробка з урахуванням контексту.

Конфіденційність

Кодування та декодування виконуються у вашому браузері за допомогою звичайних операцій із рядками; текст не відображається як HTML, не завантажується на сервер, не зберігається й не передається в аналітику.