To display a JavaScript string as plain text in a webpage, assign it to an element’s textContent property. The browser displays characters such as < and & without parsing them as HTML. Use HTML entity encoding only when generating HTML for a specific HTML context, and sanitize input when you intend to allow markup.
Display a string as text with textContent
For ordinary text, use the DOM’s text API rather than building an HTML string. OWASP identifies textContent as a safe sink because the browser treats the value as text instead of interpreting it as markup.
const output = document.querySelector("#output");
output.textContent = untrustedValue;If untrustedValue is <img src=x onerror=alert(1)>, the element displays those characters as text; it does not create an image element. This is also the straightforward way to show text that resembles HTML entities: assign the characters you want displayed, and do not route the value through an HTML parser.
Avoid concatenating untrusted data into a string and assigning that string to innerHTML. That asks the browser to parse the string as markup and can create a cross-site scripting (XSS) vulnerability. OWASP’s DOM-based XSS guidance explains the risks of using unsafe DOM execution contexts with untrusted data.
#1 Best Overall
When to encode HTML entities
Entity encoding is appropriate when you are generating HTML text for a specific output context. Common substitutions include & for &, < for <, > for >, " for ", and ' for '. OWASP documents these examples in its XSS Prevention Cheat Sheet.
Encoding changes how the HTML parser interprets text in that output location. It is not a universal JavaScript escaping function: the right protection depends on whether the value is going into HTML text, an attribute, a URL, JavaScript, or CSS. MDN’s XSS guidance describes why output encoding must match the context. For DOM text, prefer textContent instead of manually replacing characters.
Rank #2
Choose the method for the content you intend to insert
| Intended content | Recommended approach | Why |
|---|---|---|
| Plain text, including untrusted input | Set textContent |
The browser treats the value as text rather than parsing it as HTML. |
| Text being assembled into generated HTML | Encode for the precise HTML output context | Encoding must match where the value will be parsed; HTML entity encoding does not cover every context. |
| User-provided markup that the application intends to allow | Use a reputable, context-appropriate HTML sanitizer | Encoding would show markup literally; sanitization is intended to retain permitted markup while removing unsafe content. |
| Markup inserted through a browser sanitizing API | Consider Element.setHTML() after checking support |
It parses and sanitizes HTML, but MDN marks the API as limited availability and not Baseline. |
If users are allowed to submit HTML
Use a reputable sanitizer configured for the markup your application actually permits. Do not treat a few string replacements—such as changing angle brackets—as sanitization. Nor should you sanitize markup, serialize it, and then feed it back into an unsafe HTML parser sink: MDN warns that sanitization is context-aware and re-parsing can reintroduce risk.
What about Element.setHTML()?
MDN describes Element.setHTML() as an XSS-safe method that parses and sanitizes a string before insertion, removing unsafe elements and attributes. However, MDN marks it as limited availability and not Baseline. The related HTML Sanitizer API is also marked limited availability. Check support for the browsers your audience uses before relying on these APIs as your only defense.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchIs there one JavaScript “htmlEntities” function?
The phrase “htmlEntities” can mean an entity-encoding helper or a particular package, but it does not identify a specific library, runtime, framework, or destination context. There is no single substitution function that safely handles every place a value might be used. If the goal is simply to show a string in a browser page, the built-in textContent property is the portable choice.
Quick Recap
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
