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

HTML-сутність – це коротка послідовність символів, що представляє символ у вихідному коді HTML. Сутності використовуються, коли символ був би неоднозначним або недійсним у звичайному HTML – наприклад, `<` і `>` позначають межі HTML-тегів, тому літеральний `<` у тексті має записуватися як `&lt;`, щоб браузер не інтерпретував його як початок тегу.

HTML-сутності існують у двох формах. Іменовані сутності використовують читабельне ім'я після `&` і перед `;`, наприклад `&amp;` для амперсанда, `&copy;` для символу авторського права або `&mdash;` для тире. Числові сутності використовують десяткову або шістнадцяткову кодову точку Unicode – `&#169;` і `&#xA9;` обидва дають символ авторського права ©.

П'ять зарезервованих HTML-символів, які повинен знати кожен розробник:

• `&amp;` – амперсанд `&`
• `&lt;` – знак «менше» `<`
• `&gt;` – знак «більше» `>`
• `&quot;` – подвійні лапки `"`
• `&#39;` – апостроф / одинарні лапки `'`

Окрім цих п'яти, HTML визначає іменовані сутності для сотень інших символів: літери з діакритикою (`&eacute;` = e з гострим наголосом), нерозривні пробіли (`&nbsp;`), типографічні розділові знаки (`&mdash;` = тире, `&ldquo;` і `&rdquo;` = типографські лапки), символи валют (`&euro;` = знак євро), математичні символи та грецькі літери.

Кодуйте HTML-сутності щоразу, коли вставляєте звичайний текст у HTML-документ і цей текст може містити символи, зарезервовані HTML. Найпоширеніші ситуації:

• Вставка користувацького контенту або тексту блогу в CMS або шаблон, що зберігає сирий HTML.
• Вбудовування прикладів коду в записи блогу або сторінки документації – фрагмент на кшталт `<strong>жирний</strong>` має бути закодований як `&lt;strong&gt;жирний&lt;/strong&gt;`, щоб браузер відображав його як видимий текст.
• Побудова JSON-навантажень, вбудованих у HTML-теги `<script>`, де `<`, `>` і `&` можуть порушити навколишню HTML-структуру.
• Збереження значень атрибутів, які можуть містити подвійні лапки, щоб не порушити навколишні роздільники `"..."`.
• Кодування спеціальних символів для HTML-шаблонів електронної пошти.

Використовуйте базовий режим, коли потрібно екранувати лише п'ять зарезервованих символів. Використовуйте розширений режим для максимальної сумісності з HTML або для застарілих систем, що підтримують лише ASCII.

Декодуйте HTML-сутності, коли отримуєте вже екранований текст і вам потрібно прочитати, обробити або відобразити вихідні символи. У пошукових запитах це часто називають HTML decode, HTML unescape або перетворенням HTML-кодованого тексту на звичайний текст. Типові ситуації:

• Відповіді API, поля яких містять HTML-екранований текст – наприклад, `Tom &amp; Jerry`, коли очікувалося `Tom & Jerry`. У цьому разі потрібно перетворити HTML-сутності на текст.
• Виправлення двічі закодованого контенту CMS, де утворилися рядки на кшталт `&amp;lt;` замість `&lt;` або `<`.
• Читання записів RSS- або Atom-стрічок, текстовий вміст яких зазвичай HTML-кодований.
• Перегляд рядків журналу з HTML-екранованими параметрами запиту або повідомленнями про помилки.
• Копіювання видимого тексту з HTML-вихідника, де вміст зберігається у вигляді сутностей.

Цей інструмент декодує як іменовані сутності (`&amp;`, `&copy;`, `&mdash;`, `&nbsp;` та сотні інших), так і числові сутності в десятковій (`&#169;`) і шістнадцятковій (`&#xA9;`) нотації.

Цей кодувальник пропонує два рівні деталізації кодування.

Базовий режим кодує лише п'ять зарезервованих HTML-символів: `&` стає `&amp;`, `<` стає `&lt;`, `>` стає `&gt;`, `"` стає `&quot;`, `'` стає `&#39;`. Всі інші символи – літери з діакритикою на кшталт `é` і `ü`, символи на кшталт `©` і `—`, емодзі на кшталт 😀 – передаються без змін. Використовуйте базовий режим, коли цільове середовище підтримує Unicode нативно.

Розширений режим кодує ті самі п'ять зарезервованих символів і додатково перетворює кожен не-ASCII-символ на десяткову числову сутність. Наприклад, `é` стає `&#233;`, `©` стає `&#169;`, `—` стає `&#8212;`, а 😀 стає `&#128512;`. Використовуйте розширений режим для отримання чистого ASCII-виводу або для застарілих систем.

Розробники іноді шукають те саме завдання за запитами htmlDecode, htmlEncode, HTML escape, HTML unescape, кодувати HTML або декодувати HTML. Формулювання змінюється, але мета одна: безпечне перетворення між читабельними символами та їхнім HTML-сутнісним представленням.

Приклад туди-назад у базовому режимі:

• Введення: `Café & © 😀`
• Закодовано (базовий): `Café &amp; © 😀`
• Декодовано: `Café & © 😀`

Приклад туди-назад у розширеному режимі:

• Введення: `Café & © 😀`
• Закодовано (розширений): `Caf&#233; &amp; &#169; &#128512;`
• Декодовано: `Café & © 😀`

Кодування HTML-сутностей і URL-кодування – це два абсолютно різних механізми з різними цілями і різним виводом, хоча обидва перетворюють спеціальні символи в альтернативне представлення.

Кодування HTML-сутностей призначене для HTML-документів. Воно замінює символи зі спеціальним значенням у HTML-розмітці сутнісними послідовностями, які HTML-парсер обробляє як текстовий вміст. Результат – це все ще читабельний текст: `&amp;` відображається як `&` у браузері.

URL-кодування (відсоткове кодування) призначене для URL-адрес. Воно замінює небезпечні або зарезервовані символи в URL відсотково-кодованими байтовими послідовностями. Пробіл стає `%20`, амперсанд – `%26`, знак «менше» – `%3C`.

Порівняння тих самих символів в обох системах:

• `&` – HTML: `&amp;`, URL: `%26`
• `<` – HTML: `&lt;`, URL: `%3C`
• `>` – HTML: `&gt;`, URL: `%3E`
• `"` – HTML: `&quot;`, URL: `%22`
• `'` – HTML: `&#39;`, URL: `%27`

Якщо вставити HTML-кодований текст у кодувальник URL, він закодує самі символи сутностей (`&`, `;`, `#`), що майже ніколи не є бажаним. Використовуйте цю сторінку для декодування HTML-сутностей, кодування HTML-сутностей і перетворення HTML-кодованого тексту у читабельний вигляд.

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

Очищення HTML – це інша операція, яка видаляє або переписує HTML-розмітку: видаляє небажані теги, нормалізує атрибути або очищає потенційно небезпечний контент. Функція очищення могла б перетворити `<b onclick="...">жирний</b>` на `<b>жирний</b>` або просто `жирний`.

Цей інструмент не очищає HTML. Якщо вставити сирий HTML у кодувальник, він закодує кутові дужки та інші зарезервовані символи в розмітці, перетворивши `<p>Привіт</p>` на `&lt;p&gt;Привіт&lt;/p&gt;`. Він не перевіряє, не видаляє і не реструктурує елементи.

Цей інструмент також не є очищувачем тексту. Він не видаляє зайві пробіли, не прибирає діакритичні знаки і не нормалізує перенесення рядків. Його єдине завдання – кодувати та декодувати HTML-сутності.