String Escaping Explained: JavaScript, JSON, HTML and URL Encoding

String escaping is the process of marking certain characters in a string so that they are interpreted literally rather than as control characters. Every developer encounters escaping regularly, whether in JavaScript code, JSON data, HTML templates or URL parameters. Getting it wrong leads to broken output, parse errors or, in the worst case, security vulnerabilities like cross-site scripting (XSS).

Why Escaping Matters

Most data formats use specific characters for structure. JSON uses double quotes to delimit strings. HTML uses angle brackets to define tags. URLs use certain characters as delimiters. When your actual data contains these characters, you must escape them so the parser does not confuse data with syntax. Without proper escaping, a user-submitted string containing <script> could execute arbitrary code in a browser.

Common Escape Sequences

Most programming languages share a set of backslash escape sequences:

• \n - newline (line feed)
• \t - horizontal tab
• \\ - literal backslash
• \" - double quote inside a double-quoted string
• \' - single quote inside a single-quoted string (JavaScript only)
• \r - carriage return
• \0 - null character

JavaScript Escaping

JavaScript strings support all the common escape sequences plus Unicode escapes. You can represent any character using \uXXXX for BMP characters or \u{XXXXX} for characters outside the Basic Multilingual Plane:

const euro = "\u20AC";     // €
const emoji = "\u{1F680}"; // rocket emoji

// Template literals use backticks, so escape them with \
const msg = `Price: \${euro}99`;

Template literals introduce another layer: the $${} syntax. If you need a literal dollar-brace in a template string, escape the backslash.

JSON Escaping

JSON is stricter than JavaScript. Strings must use double quotes, and only a limited set of escape sequences is valid: \", \\, \/, \b, \f, \n, \r, \t, and \uXXXX.

A common mistake is using single quotes in JSON. Unlike JavaScript, JSON does not support single-quoted strings. Another pitfall is including unescaped control characters like raw tabs or newlines, which will cause JSON.parse() to throw an error.

// Valid JSON
{ "message": "Line 1\nLine 2" }

// Invalid JSON (single quotes, raw newline)
{ 'message': 'Line 1
Line 2' }

HTML Entity Encoding

HTML uses a completely different escaping mechanism: character entities. The five characters that must be escaped in HTML content are:

• & for &
• < for <
• > for >
• " for " (inside attributes)
• ' for '

You can also use numeric entities like < (decimal) or < (hexadecimal) for any Unicode character. Modern frameworks like React handle HTML escaping automatically when you use JSX expressions, which is one reason they are safer than manual string concatenation.

URL Percent Encoding

URLs have their own reserved characters: : / ? # [ ] @ ! $ & ' ( ) * + , ; =. When these characters appear in data (like query parameters), they must be percent-encoded. The encoding replaces each byte with %XX where XX is the hexadecimal byte value.

// Space becomes %20 or +
"hello world" → "hello%20world"

// In JavaScript
encodeURIComponent("name=John&age=30")
// → "name%3DJohn%26age%3D30"

Use encodeURIComponent() for individual parameter values and encodeURI() for full URLs. A common mistake is using encodeURI() when you should use encodeURIComponent(), which leaves characters like & and = unescaped.

XSS Prevention Through Escaping

Cross-site scripting attacks exploit insufficient output escaping. When user input is inserted into HTML without encoding, an attacker can inject executable scripts. The fundamental rule is: always escape output for the context where it is being used.

• Inserting into HTML body? Use HTML entity encoding.
• Inserting into a JavaScript string? Use JavaScript escaping.
• Inserting into a URL parameter? Use percent encoding.
• Inserting into a CSS value? Use CSS escaping or a whitelist approach.

Context matters. HTML-encoding a value that ends up inside a JavaScript string does not prevent XSS. You must match the escaping method to the output context.

CSV Escaping

CSV files wrap fields in double quotes when they contain commas, newlines or double quotes. A double quote inside a quoted field is escaped by doubling it:

name,description
"Widget","A ""great"" product"
"Gadget","Has commas, here"

Common Mistakes

• Double escaping: escaping a string that was already escaped, producing & instead of &
• Wrong context: using HTML escaping for a JavaScript string or vice versa
• Forgetting backslash itself: \ must be escaped as \\ in most languages
• Using encodeURI() instead of encodeURIComponent() for query parameters
• Trusting client-side escaping for security (always validate and escape on the server too)