Encoder Entitas HTML Gratis — Escape HTML

Apa Itu Encoding Entitas 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

Fitur Utama

Contoh Terkerjakan

<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)

Cara Memakai HTML Entity Encoder

1. 1

   Tempel HTML atau teks Anda

   Jatuhkan markup atau teks biasa yang ingin Anda escape ke kotak input. Output ter-encode diperbarui secara langsung saat Anda mengetik — tidak ada tombol kirim dan tidak ada yang dikirim ke mana pun.

2. 2

   Pilih format entitas

   Named adalah default yang mudah dibaca (<, &, ©). Beralih ke Desimal (<) atau Hex (<) ketika sistem penerima lebih menyukai referensi numerik atau Anda tidak bisa menjamin entitas bernama didukung.

3. 3

   Opsional, encode semua non-ASCII

   Biarkan ini mati untuk halaman UTF-8 modern agar aksen dan emoji tetap menjadi karakter mentah yang mudah dibaca. Centang hanya saat teks harus bertahan melalui charset satu-byte lawas, yang mengubah setiap karakter di atas 0x7F menjadi entitas yang aman-ASCII.

4. 4

   Salin hasil ter-encode

   Klik Salin untuk menaruh string yang di-escape ke clipboard Anda, siap ditempel ke templat, halaman dokumentasi, atau field basis data. Bersihkan mereset kedua panel untuk cuplikan berikutnya.

5. 5

   Butuh kebalikannya? Tukar arah

   Gunakan Tukar arah untuk beralih ke HTML Entity Decoder saat Anda ingin mengubah entitas kembali menjadi karakter yang diwakilinya.

Kesalahan Umum Encoding 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

Siapa yang Memakai Alat Ini

Menampilkan Contoh Kode di Halaman Web

Menulis tutorial atau dokumentasi yang perlu menampilkan HTML literal? Escape cuplikan agar <strong>bold</strong> muncul sebagai teks alih-alih dirender. Tempel markup, salin output yang di-escape, dan jatuhkan ke dalam blok <pre> atau <code>.

Membersihkan Input Pengguna Terhadap XSS

Sebelum menyisipkan string yang dipasok pengguna ke dalam HTML Anda, escape lima karakter dipesan agar payload seperti <script>…</script> menjadi teks inert. Ini pertahanan fundamental terhadap cross-site scripting saat Anda membangun markup secara manual.

Menyimpan Markup di Dalam Field Basis Data atau JSON

Perlu menyimpan fragmen HTML sebagai string biasa tanpa ditafsirkan di hilir? Encode lebih dulu agar kurung sudut dan ampersand bertahan melalui penyimpanan dan tampil ulang utuh, lalu decode saat keluar.

Menyusun Templat Email dan Konten CMS

Klien email dan sistem manajemen konten tak kenal ampun terhadap karakter khusus mentah. Escape set yang dipesan — dan opsional semua non-ASCII — agar templat Anda dirender konsisten di seluruh klien yang mungkin tidak berbagi charset Anda.

Mengonversi Teks untuk Charset Lawas

Menargetkan sistem yang tidak bisa menangani UTF-8 mentah? Aktifkan "Encode semua non-ASCII" untuk menulis ulang setiap huruf beraksen, simbol, dan emoji sebagai entitas yang aman-ASCII, menjamin teks bertahan melalui transport pipa 7-bit bersih.

Meng-escape Nilai Atribut XML dan SVG

XML dan SVG inline berbagi karakter dipesan HTML. Encode tanda kutip dan kurung sudut agar string dengan markup tertanam masuk dengan aman ke nilai atribut tanpa merusak struktur dokumen.

Mencari Entitas dengan Cepat

Lupa apakah tanda merek dagang itu ™ atau ™? Ketik karakternya, baca entitas named, desimal, dan hex-nya dari output, atau lihat tabel referensi cepat terpasang tanpa meninggalkan halaman.

Cara Kerja Encoder

Mode Karakter-Khusus (Default)

Secara default hanya lima karakter yang dipesan HTML yang di-escape — & < > " ' — mengikuti aturan serialisasi HTML WHATWG untuk output aman. & diganti lebih dulu agar entitas yang dihasilkan untuk karakter lain tidak di-escape ganda. Semua karakter lain, termasuk non-ASCII, lewat tanpa berubah.

Apostrof Memakai '

Alih-alih ' bernama — yang tidak terdefinisi di HTML4 dan tidak aman di beberapa parser lawas — kutip tunggal dikeluarkan sebagai ' numerik (desimal '), mereferensikan U+0027. Ini cocok dengan konvensi pustaka yang teruji baik seperti he dan menjamin output aman di HTML4, HTML5, dan XML sekaligus.

Encoding Named, Desimal, dan Hex

Pemilih format mengontrol bagaimana setiap karakter yang di-escape ditulis: Named memakai label terdefinisi bila ada (<, ©), Desimal menulis titik kode Unicode dalam basis 10 (<), dan Hex menulisnya dalam basis 16 (<). Bentuk numerik mereferensikan titik kode yang sama dengan bentuk bernama dan dapat dipertukarkan saat di-parse.

Opsi Encode-Semua-Non-ASCII

Saat diaktifkan, setiap karakter dengan titik kode di atas 0x7F diubah menjadi entitas dalam format yang dipilih — café menjadi café (named), café (desimal), atau café (hex). Karakter astral seperti emoji di-encode dengan titik kode penuhnya (😀 → 😀). Ini menghasilkan output ASCII 7-bit bersih untuk transport lawas.

Charset Versus Entitas

Character set menentukan bagaimana teks disimpan sebagai byte; entitas adalah cara mengeja karakter hanya memakai ASCII. Pada halaman UTF-8 karakter non-ASCII tidak butuh entitas, itulah mengapa default membiarkannya mentah. Meng-encode semuanya hanya perlu ketika output harus melintasi charset non-Unicode atau sistem yang bermusuhan dengan UTF-8.

Lokal di Browser, Nol Jaringan

Encoding berjalan sinkron dalam JavaScript di thread utama; tidak ada panggilan API, tidak ada bolak-balik worker ke server, dan tidak ada persistensi. Input tidak pernah meninggalkan halaman, yang bisa Anda konfirmasi dengan mengamati panel Network kosong saat Anda mengetik.

Praktik Terbaik Escape HTML

Escape saat Output, dalam Konteks yang Tepat

Encode data pada saat Anda menyisipkannya ke dalam HTML, bukan saat menerimanya, dan cocokkan encoding dengan konteks. HTML entity encoding untuk konten elemen dan atribut HTML; gunakan URL encoding di dalam URL dan escape JavaScript/JSON di dalam blok skrip. Escape di konteks yang salah meninggalkan celah.

Selalu Escape Input Tidak Tepercaya

String apa pun yang berasal dari pengguna, unggahan, atau API eksternal harus di-escape sebelum mendarat di markup Anda. Ini pertahanan XSS inti: payload seperti <script>alert(1)</script> menjadi teks inert begitu kurung sudut menjadi entitas.

Utamakan Escape Bawaan bila Ada

React, Vue, dan sebagian besar mesin templating server meng-escape teks interpolasi secara otomatis; menetapkan element.textContent juga meng-escape untuk Anda. Gunakan alat ini untuk konversi sekali pakai dan untuk memahami output — tetapi dalam kode aplikasi, sandarkan pada auto-escape framework alih-alih merakitnya sendiri.

Biarkan Non-ASCII Mentah pada Halaman UTF-8

Jika halaman Anda mendeklarasikan <meta charset="utf-8">, jangan encode aksen dan emoji menjadi entitas — UTF-8 mentah lebih pendek, lebih mudah dibaca, dan sama benarnya. Sediakan "Encode semua non-ASCII" hanya untuk kasus charset-lawas asli yang benar-benar membutuhkannya.

Gunakan Apostrof Numerik dalam Konteks Campuran

Ketika output mungkin dikonsumsi parser lama, prosesor XML, atau klien email, utamakan ' numerik daripada ' bernama untuk kutip tunggal. Bentuk numerik dipahami secara universal; bentuk bernama tidak, dan "'" literal yang nyasar dalam teks yang dirender adalah bug umum yang dapat dihindari.

Pertanyaan yang Sering Diajukan