Escape and Unescape: escaping HTML, JSON, JavaScript, and URLs

Escaping is the replacement of special characters with safe sequences so they are interpreted as data rather than code or markup. The reverse operation—unescaping—restores the original characters. Understanding the different types of escaping and applying them correctly is critical for security (protection against XSS), data integrity, and proper API operation. This article covers HTML entities, JSON, JavaScript, URL encoding, Base64, code examples, and common mistakes.

Use Escape/Unescape on reChecker to escape and restore strings.

What escaping is and why it is needed

Definition

Escape is the conversion of characters with special meaning into neutral sequences. For example, < in HTML can start a tag, so it is replaced with < to display it as text.

Unescape is the reverse conversion: < → <.

Why escaping is needed

Security (XSS) — user input containing <script>, ", or ' can execute malicious code or break the markup. Escaping converts dangerous characters into safe text.

Data integrity — when transmitting JSON, URLs, or inserting strings into JavaScript, strings containing quotation marks, line breaks, and special characters must be encoded correctly; otherwise, the parser will return an error or corrupt the data.

Compatibility — not all systems support all characters. URLs, for example, allow a limited set; Cyrillic characters and spaces are encoded using percent-encoding.

Types of escaping

HTML entities

HTML special characters are replaced with named or numeric entities:

When to use: when outputting user content in HTML to prevent XSS and correctly display <, >, &.

<!-- Пользователь ввёл: <script>alert(1)</script> -->
<!-- Экранированный вывод: -->
&lt;script&gt;alert(1)&lt;/script&gt;

JSON

In JSON, strings are enclosed in double quotation marks. The characters ", \, line breaks, and tabs are escaped with a backslash:

const str = 'He said "Hello"';
JSON.stringify(str); // '"He said \\"Hello\\""'

JavaScript

In JS strings, quotation marks (depending on the string type), \, and line breaks are escaped. Inserting a string into an HTML attribute requires double protection: JavaScript escaping + HTML entities.

const userInput = 'O\'Reilly';
const inAttr = 'onclick="alert(\'' + userInput.replace(/'/g, "\\'") + '\')"';

URL encoding (percent-encoding)

Characters outside the A-Za-z0-9-_.~ set are encoded as %XX (the hex value of a byte in UTF-8):

When to use: query parameters, path segments, and form data.

encodeURIComponent('hello world'); // "hello%20world"
encodeURIComponent('a&b=c');      // "a%26b%3Dc"

Base64

Encoding binary data or text as a string of A-Za-z0-9+/= characters. It is not escaping in the traditional sense, but it is often used alongside escape tools to transmit data in JSON, URLs, or other contexts where binary data is not allowed.

btoa('Hello');  // "SGVsbG8="
atob('SGVsbG8='); // "Hello"

Note: btoa/atob in browsers work only with Latin1. For UTF-8, use encodeURIComponent + btoa with modifications, or a library such as base64-js.

Code examples

HTML escaping (JavaScript)

function escapeHtml(str) {
  const map = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;'
  };
  return str.replace(/[&<>"']/g, c => map[c]);
}

JSON (built-in methods)

const obj = { message: 'Say "Hi"' };
JSON.stringify(obj); // '{"message":"Say \\"Hi\\""}'

URL (built-in methods)

// Для целого URL — encodeURI (не трогает :/?@&=+$,#)
encodeURI('https://example.com/path?q=hello world');
// "https://example.com/path?q=hello%20world"

// Для значений параметров — encodeURIComponent
const params = { q: 'поиск', page: 1 };
const query = new URLSearchParams(params).toString();

Python: HTML

import html
html.escape('<script>')  # '&lt;script&gt;'
html.unescape('&lt;')    # '<'

Python: URL

from urllib.parse import quote, unquote
quote('a&b=c')   # 'a%26b%3Dc'
unquote('a%26b%3Dc')  # 'a&b=c'

Common mistakes

Double escaping

If a string has already been escaped, escaping it again will corrupt it: & → &. Check the source of the data.

Confusing encodeURI and encodeURIComponent

• encodeURI — for a complete URL; it does not encode ;/?:@&=+$,#
• encodeURIComponent — for parameter values; it encodes almost everything

Always use encodeURIComponent for query parameters.

Escaping in the wrong place

HTML escaping is needed when outputting data in HTML. Do not escape data when saving it to a database—store raw data and escape it when rendering.

Ignoring context

The same text can be inserted into HTML, an attribute, JavaScript, or a URL. Each context requires its own escaping. There is no universal “escape everything.” For example, the HTML entity " in a JavaScript string will be displayed literally, not as a quotation mark. Always identify the target context and apply the appropriate type of escaping.

Escaping when storing instead of when outputting

Some systems escape data when saving it to a database. This makes searching, displaying data in different formats, and reusing it more difficult. It is recommended to store raw data and escape it only when outputting it in a specific context (HTML, JSON, URL).

Escape/Unescape tool on reChecker

Escape/Unescape on reChecker supports:

• HTML — entities (named and numeric)
• JSON — escaping quotation marks, slashes, and Unicode
• JavaScript — quoted strings
• URL — percent-encoding and decoding
• Base64 — encoding and decoding

Paste your text, choose a conversion type, and get the result. Useful for debugging, preparing data, and checking that escaping is correct. Support for multiple formats in one interface means you don't have to switch between different utilities when working with mixed content (HTML + JSON + URL).

FAQ

What is the difference between an HTML entity and URL encoding?

An HTML entity replaces characters such as <, >, & with <, >, & for safe display in HTML. URL encoding (percent-encoding) replaces characters with %XX for transmission in a URL. Different contexts require different formats.

Do I need to escape data when saving it to a database?

Usually not. Store raw data. Escape it when outputting it—in HTML, JSON, or a URL. Exception: if the database or ORM requires escaping (for example, older approaches to SQL), but modern practices use parameterized queries.

How can I protect against XSS when outputting user input?

Escape all user data when outputting it in HTML: < → <, > → >, & → &, " → ", ' → '. Use templates with auto-escaping enabled (React, Vue, Jinja2 with escaping enabled) or explicitly call an escape function.

Why use encodeURIComponent instead of encodeURI for parameters?

encodeURI does not encode &, =, +, and other characters that are significant in a query string. A value of a&b without encoding will break parameter parsing. encodeURIComponent encodes everything needed for safe insertion into ?key=value.

Which tool should I use for online escape/unescape?

Escape/Unescape on reChecker is a free online tool for escaping and restoring strings. It supports HTML, JSON, JavaScript, URL, and Base64. It is suitable for developers debugging, preparing data, and checking that encoding is correct.