&nbsp not displaying properly in javascript [duplicate]

Question

I'm trying to add lines to my page using javascript. I'm eventually planning on generating ascii art from it, but that's besides the point. For some reason, the text |    | renders properly as part of html, but not as a textNode. My MRE is as follows:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div id="Test">
        |&nbsp;&nbsp;&nbsp;&nbsp;|
    </div>
    <script>
        testDiv = document.getElementById('Test')
        testDiv.appendChild(document.createElement('br'))
        testDiv.appendChild(document.createTextNode('|&nbsp;&nbsp;&nbsp;&nbsp;|'))
    </script>
</body>

On Chromium, it shows up as:

|    |
|&nbsp;&nbsp;&nbsp;&nbsp;|

I've tried about 10 different ways to encode the non-breaking space, but I get a similar result no matter what. I've tried using \ and $# for every encoding I can find. I have not tried it on a different browser.

Duplicate of How to insert HTML entities with createTextNode?. Inserting text (.textContent, .createTextNode) won’t parse HTML (including HTML entities), as opposed to inserting HTML (.innerHTML, .insertAdjacentHTML). — Sebastian Simon
– Sebastian Simon, Commented Mar 15, 2021 at 13:15
To parse HTML entities securely, try testDiv.appendChild(document.createTextNode(new DOMParser().parseFromString('| |', "text/html").documentElement.textContent));. This will parse the HTML in an independent document which cannot execute any scripts. — Sebastian Simon
– Sebastian Simon, Commented Mar 15, 2021 at 13:22
@SebastianSimon can you elaborate on your security comment? Assuming that the string being appended is trusted, I don't see why this is necessary. — import huh
– import huh, Commented Mar 15, 2021 at 22:14
@importhuh The string possibly not being trusted is exactly the reason. element.innerHTML = " " works fine, but element.innerHTML = '<img src="." onerror="alert(1);">' can be dangerous. Such XSS attacks won’t happen with the DOMParser approach. The code, as written, also ignores HTML elements and only takes the resulting text content of HTML entities. See my answer to Find and replace specific text characters across a document with JS for more context. — Sebastian Simon
– Sebastian Simon, Commented Mar 16, 2021 at 3:13

Kishieel · Accepted Answer · 2021-03-15 13:19:43Z

2

You can use unicode literal for this case.

document.createTextNode("|\u00A0\u00A0\u00A0\u00A0|")

answered Mar 15, 2021 at 13:19

Kishieel

2,0852 gold badges13 silver badges26 bronze badges

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

Comments

Pradeep Kumar · Accepted Answer · 2021-03-15 13:47:21Z

2

Enclose your text in <pre></pre> tags. It would be rendered as you typed it. You won't need  

<pre>
|    |
</pre>

|    |

Javascript Example

<script>
function myFunction() {
  var x = document.createElement("PRE");
  var t = document.createTextNode("|     |");
  x.appendChild(t);
  document.body.appendChild(x);
}
</script>

edited Mar 15, 2021 at 13:47

answered Mar 15, 2021 at 13:15

Pradeep Kumar

7,0294 gold badges24 silver badges50 bronze badges

Collectives™ on Stack Overflow

&nbsp not displaying properly in javascript [duplicate]

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related