Darmowy koder encji HTML — escape HTML

Czym jest kodowanie encji HTML?

// Server-side templates auto-escape, but when you build HTML by hand you must escape yourself.
// The five reserved characters and their safe entities:
//   <  →  &lt;     >  →  &gt;     &  →  &amp;     "  →  &quot;     '  →  &#x27;

// Node.js — escape untrusted input before inserting it into HTML element content.
function escapeHtml(str) {
  return str
    .replace(/&/g, '&amp;')   // & first, so later entities are not double-escaped
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&#x27;'); // numeric form — safe in HTML4, HTML5 and XML
}

const userInput = `<a href="x">Tom & Jerry's</a>`;
const safe = escapeHtml(userInput);
// → &lt;a href=&quot;x&quot;&gt;Tom &amp; Jerry&#x27;s&lt;/a&gt;
document.getElementById('out').innerHTML = `<p>${safe}</p>`; // renders as literal text

// ---------------------------------------------------------------
// In practice, prefer the platform's built-in escaping where it exists:
//   - React / Vue / Angular escape interpolated text by default
//   - Use textContent instead of innerHTML when you only need text:
//       el.textContent = userInput;  // the browser escapes for you
//   - Server frameworks (Jinja, ERB, Blade) auto-escape unless you opt out

Kluczowe funkcje

Przykłady z omówieniem

<a href="x">Tom & Jerry's</a>

<a href="x">Tom & Jerry's</a>

Visit our café — it's 😀

Visit our café — it's 😀

<>&"'

<>&"'

<>&"'

<>&"'

café

café  (named)  ·  café  (decimal)  ·  café  (hex)

Jak używać kodera encji HTML

1. 1

   Wklej swój HTML lub tekst

   Wrzuć składnię lub zwykły tekst, który chcesz poddać escape, do pola wejściowego. Zakodowany wynik aktualizuje się na żywo podczas pisania — nie ma przycisku zatwierdzania i nic nie jest nigdzie wysyłane.

2. 2

   Wybierz format encji

   Nazwany to czytelny domyślny wybór (<, &, ©). Przełącz na dziesiętny (<) lub szesnastkowy (<), gdy system docelowy woli odwołania liczbowe lub nie możesz zagwarantować obsługi encji nazwanych.

3. 3

   Opcjonalnie zakoduj wszystko spoza ASCII

   Pozostaw tę opcję wyłączoną dla nowoczesnych stron UTF-8, aby akcenty i emoji pozostały czytelnymi surowymi znakami. Zaznacz ją tylko wtedy, gdy tekst musi przetrwać starszy jednobajtowy zestaw znaków — wtedy każdy znak powyżej 0x7F zamienia się na bezpieczną dla ASCII encję.

4. 4

   Skopiuj zakodowany wynik

   Kliknij Kopiuj, by umieścić ciąg po escape w schowku, gotowy do wklejenia w szablon, stronę dokumentacji lub pole bazy danych. Wyczyść resetuje oba panele dla kolejnego fragmentu.

5. 5

   Potrzebujesz operacji odwrotnej? Zamień kierunek

   Użyj „Zamień kierunek”, by przełączyć się na dekoder encji HTML, gdy chcesz zamienić encje z powrotem na znaki, które reprezentują.

Częste błędy przy kodowaniu HTML

replace < and > first, then &  →  &lt;  becomes  &amp;lt;

escape & first, then the rest  →  <  stays  <

It's here  →  may render as  It's here

It's here  →  renders as  It's here

&  encoded again  →  &  shows as  &

&  left as-is  →  renders as  &

href="/search?q=a&b c"  →  the space still breaks the URL

href="/search?q=a%26b%20c"  →  URL-encoded, valid

café on a UTF-8 page  →  needless, harder to read

café on a UTF-8 page  →  valid and clean

title="He said "hi""  →  attribute breaks out

title="He said "hi""  →  contained

Kto korzysta z tego narzędzia

Wyświetlanie próbek kodu na stronie internetowej

Piszesz tutorial lub dokumentację, która musi pokazać dosłowny HTML? Poddaj fragment escape, aby <strong>bold</strong> pojawił się jako tekst, a nie wyrenderował. Wklej składnię, skopiuj wynik po escape i wstaw go w blok <pre> lub <code>.

Oczyszczanie danych użytkownika przed XSS

Zanim wstawisz dowolny ciąg od użytkownika do swojego HTML, poddaj escape pięć znaków zarezerwowanych, aby ładunek taki jak <script>…</script> stał się martwym tekstem. To podstawowa obrona przed cross-site scripting, gdy budujesz składnię ręcznie.

Przechowywanie składni w polu bazy danych lub JSON

Musisz zapisać fragment HTML jako zwykły ciąg bez jego interpretacji dalej? Najpierw go zakoduj, aby nawiasy kątowe i ampersandy przetrwały przechowanie i ponowne wyświetlenie w nienaruszonej formie, a potem zdekoduj przy wyjściu.

Tworzenie szablonów e-maili i treści CMS

Klienty poczty i systemy zarządzania treścią są nieprzyjazne wobec surowych znaków specjalnych. Poddaj escape zestaw zarezerwowany — i opcjonalnie wszystko spoza ASCII — aby szablon renderował się spójnie w klientach, które mogą nie współdzielić Twojego zestawu znaków.

Konwersja tekstu dla starszego zestawu znaków

Celujesz w system, który nie radzi sobie z surowym UTF-8? Włącz „Koduj wszystkie znaki spoza ASCII”, aby przepisać każdą literę z akcentem, symbol i emoji jako bezpieczną dla ASCII encję, gwarantując, że tekst przetrwa transport przez kanały czyste 7-bitowo.

Escape wartości atrybutów XML i SVG

XML i wbudowany SVG współdzielą znaki zarezerwowane HTML. Zakoduj cudzysłowy i nawiasy kątowe, aby ciąg z osadzoną składnią bezpiecznie wpasował się w wartość atrybutu bez psucia struktury dokumentu.

Szybkie wyszukanie encji

Zapomniałeś, czy znak towarowy to ™ czy ™? Wpisz znak, odczytaj jego encję nazwaną, dziesiętną i szesnastkową z wyniku lub zajrzyj do wbudowanej tabeli szybkiego przeglądu, nie opuszczając strony.

Jak działa koder

Tryb znaków specjalnych (domyślny)

Domyślnie escape obejmuje tylko pięć zarezerwowanych przez HTML znaków — & < > " ' — zgodnie z regułami serializacji HTML organizacji WHATWG dla bezpiecznego wyniku. & jest zastępowany jako pierwszy, aby encje wygenerowane dla pozostałych znaków nie zostały podwójnie poddane escape. Wszystkie inne znaki, w tym spoza ASCII, przechodzą bez zmian.

Apostrof używa '

Zamiast nazwanego ' — który jest niezdefiniowany w HTML4 i niebezpieczny w niektórych starszych parserach — apostrof jest zwracany jako liczbowy ' (dziesiętnie '), odwołując się do U+0027. Odpowiada to konwencji dobrze przetestowanych bibliotek jak he i gwarantuje, że wynik jest bezpieczny zarówno w HTML4, HTML5, jak i XML.

Kodowanie nazwane, dziesiętne i szesnastkowe

Selektor formatu steruje sposobem zapisu każdego znaku po escape: nazwany używa zdefiniowanych etykiet tam, gdzie istnieją (<, ©), dziesiętny zapisuje punkt kodowy Unicode w systemie dziesiętnym (<), a szesnastkowy w systemie szesnastkowym (<). Formy liczbowe odwołują się do tych samych punktów kodowych co formy nazwane i są wymienne po sparsowaniu.

Opcja kodowania wszystkiego spoza ASCII

Po włączeniu każdy znak o punkcie kodowym powyżej 0x7F jest zamieniany na encję w wybranym formacie — café staje się café (nazwany), café (dziesiętny) lub café (szesnastkowy). Znaki astralne, takie jak emoji, są kodowane pełnym punktem kodowym (😀 → 😀). Daje to wynik czysty 7-bitowo w ASCII dla starszego transportu.

Zestaw znaków a encje

Zestaw znaków określa, jak tekst jest przechowywany jako bajty; encja to sposób zapisu znaku przy użyciu wyłącznie ASCII. Na stronie UTF-8 znaki spoza ASCII nie potrzebują żadnej encji, dlatego tryb domyślny pozostawia je surowe. Kodowanie wszystkiego jest konieczne tylko wtedy, gdy wynik musi przejść przez zestaw znaków inny niż Unicode lub system wrogi UTF-8.

Lokalnie w przeglądarce, zero sieci

Kodowanie działa synchronicznie w JavaScripcie w głównym wątku; nie ma wywołania API, nie ma obiegu do serwera ani przechowywania. Dane wejściowe nigdy nie opuszczają strony, co możesz potwierdzić, obserwując pusty panel Sieć podczas pisania.

Dobre praktyki escape HTML

Escape w momencie wyjścia, we właściwym kontekście

Koduj dane w chwili wstawiania ich do HTML, a nie przy odbiorze, i dopasuj kodowanie do kontekstu. Kodowanie encji HTML jest dla treści elementów i atrybutów HTML; wewnątrz adresów URL używaj kodowania URL, a wewnątrz bloków skryptu escape JavaScript/JSON. Escape w niewłaściwym kontekście pozostawia lukę.

Zawsze poddawaj escape niezaufane dane

Każdy ciąg pochodzący od użytkownika, z przesłanego pliku lub z zewnętrznego API musi przejść escape, zanim trafi do Twojej składni. To podstawowa obrona przed XSS: ładunek taki jak <script>alert(1)</script> staje się martwym tekstem, gdy nawiasy kątowe są encjami.

Preferuj wbudowany escape, gdy istnieje

React, Vue i większość serwerowych silników szablonów automatycznie poddają escape interpolowany tekst; ustawienie element.textContent również robi to za Ciebie. Używaj tego narzędzia do pojedynczych konwersji i do zrozumienia wyniku — ale w kodzie aplikacji opieraj się na automatycznym escape frameworka, a nie pisz go ręcznie.

Zostaw znaki spoza ASCII surowe na stronach UTF-8

Jeśli Twoja strona deklaruje <meta charset="utf-8">, nie koduj akcentów i emoji na encje — surowy UTF-8 jest krótszy, czytelniejszy i równie poprawny. Zarezerwuj „Koduj wszystkie znaki spoza ASCII” dla prawdziwych przypadków starszych zestawów znaków, które faktycznie tego wymagają.

Używaj liczbowego apostrofu w kontekstach mieszanych

Gdy wynik może być odbierany przez starsze parsery, procesory XML lub klienty poczty, preferuj liczbowy ' zamiast nazwanego ' dla apostrofu. Forma liczbowa jest rozumiana wszędzie; forma nazwana nie, a błąkający się dosłowny tekst „'” w renderowanym tekście to częsty, możliwy do uniknięcia błąd.

Najczęściej zadawane pytania