Strings with special characters not rendering correctly in innerHTML

Question

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:

Garbled string: K@8K@<vI,= ]1h<r50\ `
Output in the page body: K@8K@

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.

This has nothing to do with “escape sequences”, but with the meaning < and > simply have in HTML. You don’t want what you created interpreted as HTML, you want it treated as text - so don’t use .innerHTML, use .innerText instead. — C3roe
– C3roe, Commented Jul 21, 2020 at 8:29
Thanks for the suggestion, I'll try this out in my code and get back. — Art
– Art, Commented Jul 21, 2020 at 8:31
Your suggestion works as intended. Thanks for the help. If you post this comment as an answer, I'll mark it as accepted. — Art
– Art, Commented Jul 21, 2020 at 8:34

Razvan-Catalin Olaru · Accepted Answer · 2020-12-03 02:39:58Z

4

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

answered Dec 3, 2020 at 2:39

Razvan-Catalin Olaru

4651 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

C3roe · Accepted Answer · 2020-07-21 08:35:48Z

2

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.

answered Jul 21, 2020 at 8:35

C3roe

97.8k15 gold badges100 silver badges172 bronze badges

Collectives™ on Stack Overflow

Strings with special characters not rendering correctly in innerHTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related