By the end of this tutorial, you’ll escape HTML special characters safely using Lodash’s _.escape() before rendering user content.
Call _.escape(string) on untrusted text.
Convert & < > " ' to entities.
Render user input as text, not live HTML.
Reverse encoding with _.unescape() when needed.
Know when _.template auto-escapes.
Escape on output; prefer framework escaping when available.
_.escape()?_.escape() converts HTML-special characters in a string into their entity equivalents so browsers display them as text instead of parsing them as markup. It is a building block for XSS mitigation when you must inject strings into HTML contexts manually.
Think of _.escape(userComment) as “make this safe to drop inside a paragraph tag as plain text.”
Comment threads, admin dashboards, email previews, and server-rendered snippets all benefit from escaping anything that did not come from your own trusted templates.
Pass the string that may contain HTML-significant characters:
_.escape(string)string — the text to escape.&, <, >, ", '.import escape from "lodash/escape";
const raw = '<script>alert("x")</script>';
const safe = escape(raw);
// -> "<script>alert("x")</script>"| Task | Code pattern | Result |
|---|---|---|
| Escape HTML | _.escape(userInput) | Entity-encoded string |
| Script tag | _.escape('<script>') | Displayed as text |
| Ampersand | _.escape('3 < 5') | 3 < 5 |
| Reverse | _.unescape(str) | Decode entities |
| Template escape tag | lodash escape interpolate syntax | Auto-escape in templates |
| RegExp literals | _.escapeRegExp(str) | Different helper |
NoReturns new string
& < > " 'HTML-significant
_.unescape()Decode entities
_.escapeRegExp()Regex metachars
Arguments to _.escape() and what they control:
string RequiredThe input that may contain characters with HTML significance.
_.escape('<div>')return value New stringA copy with special characters replaced by HTML entities.
// -> '<div>'encoded set FixedEscapes ampersand, less-than, greater-than, double quote, and single quote.
_.escape('a & b')security ImportantOne layer in depth defense—also validate on server and use CSP headers.
// escape before innerHTMLFor RegExp patterns, use _.escapeRegExp()—it escapes different characters.
Practical _.escape() patterns with copy-ready code, sample output, and interactive Try It Yourself labs.
Escape dangerous markup before displaying user content.
Neutralize a script tag so it renders as harmless text.
import escape from "lodash/escape";
const raw = '<script>alert("Hello!");</script>';
const safe = escape(raw);
console.log(safe);
// -> "<script>alert("Hello!");</script>"Angle brackets and quotes become entities browsers show literally.
Show HTML source as text in a code preview panel.
import escape from "lodash/escape";
const html = "<div>Hello, <strong>world</strong>!</div>";
const preview = escape(html);
console.log(preview);Users see the literal tags instead of bold rendering.
Escape untrusted comment text before inserting into the DOM.
import escape from "lodash/escape";
const userComment = 'Nice post! <img src=x onerror=alert(1)>';
const safeComment = escape(userComment);
console.log(safeComment);Event-handler attributes inside tags cannot execute when shown as escaped text.
Display mathematical expressions containing less-than signs.
import escape from "lodash/escape";
const expr = "3 < 5 && 5 > 2";
console.log(escape(expr));Both < and & are encoded so the browser cannot misread comparison symbols as tag openers.
Decode entities when you intentionally stored escaped text.
import escape from "lodash/escape";
import unescape from "lodash/unescape";
const original = "Tom & Jerry";
const encoded = escape(original);
const decoded = unescape(encoded);
console.log(encoded);
console.log(decoded);_.unescape() reverses entity encoding—use only on trusted content you intentionally encoded earlier.
escape vs escapeRegExp and framework escaping.
Pick the right escape helper for HTML vs regular expressions.
import escape from "lodash/escape";
import escapeRegExp from "lodash/escapeRegExp";
const input = "a+b (test)";
console.log(escape(input)); // HTML entities
console.log(escapeRegExp(input)); // Regex metacharactersHTML escape protects DOM text nodes; escapeRegExp protects dynamic RegExp construction.
_.escape() WorksLodash coerces the argument to a string.
Find & < > " ' and other mapped symbols.
Substitute HTML entity equivalents (<, etc.).
Original string unchanged; new safe string produced.
Safe for insertion as HTML text when you cannot use textContent.
_.escape() is for HTML text contexts—not URL or JavaScript string contexts.element.textContent in the DOM when you only need plain text.lodash/escape for minimal bundles._.escape() is a small, dependable step toward safer HTML output when you must compose markup manually. Encode untrusted strings, render them as text, and keep dangerous tags from executing in the browser.
Continue with _.escapeRegExp() when you build dynamic regular expressions, or _.unescape() to reverse entity encoding.
_.escape()Use these points when rendering untrusted strings in HTML.
Encode & < > " '.
BasicsText, not live HTML.
SecurityEscape user content.
PatternDecode when needed.
RelatedNext: regex safety.
Next stepSetting element.textContent treats input as plain text automatically—_.escape() is most valuable when you concatenate strings into HTML manually. Reverse encoding with _.unescape(); for RegExp literals use _.escapeRegExp() instead.
Open the Try It editor, run the examples, and experiment with your own strings.
6 people found this page helpful