CODEWITHSUNDEEP
javascripthtmlstringtext
Art
Art

Reputation: 183

Strings with special characters not rendering correctly in innerHTML

I'm quite new to JavaScript and HTML. I'm trying to write a program that takes in a number and spits out garbled text (containing all sorts of special characters and symbols; here's a sample: @;f%UA@;f%UDaVI*&e"q+/[)).

My JavaScript code takes in an input number and generates a string of garbled characters, which is then displayed on a paragraph on the page (using document.getElementById("output").innerHTML) and simultaneously copied to clipboard. The program seems to work as intended for the most part, but whenever the garbled output string contains a left angular bracket (<), the text in the paragraph is not displayed completely.

Here's a sample output:

Even the above code formatting is broken at the left angular bracket <, which leads me to suspect that this may be caused by an escape sequence or something similar. I'd be very glad if someone can suggest a way to fix this issue with the text rendering.

Upvotes: 0

Views: 2922

Answers (2)

Razvan-Catalin Olaru
Razvan-Catalin Olaru

Reputation: 365

For me, what fixed the issue was adding <meta charset="UTF-8" /> in the <head> section.

Upvotes: 4

C3roe
C3roe

Reputation: 96226

This has nothing to do with “escape sequences”, but with the meaning < and > simply have in HTML.

The browser thinks you are stating an HTML tag with <… – and tags do not show on screen in HTML, they are part of the structure.

You don’t want what you created interpreted as HTML, you want it treated as text - so don’t use .innerHTML, use .innerText instead.

Upvotes: 1

Related Questions