How to turn HTML-format user input into text in prompt

Question

I want to have a prompt box asking the user for their name. But I'm putting that directly into the page, and if I enter something HTML-y (<canvas> for example) then it places that element on the page. How can I make this into text, so instead of making a <canvas> element it writes <canvas> to the page as text?

var name = prompt("Enter your name: ");
document.getElementById("paragraph").innerHTML = name;

<p id="paragraph"></p>

Unfortunately I can't use jQuery, so a pure JS solution would be nice.

That works perfectly! Please add an answer with that information for quick future reference. — Jack Bashford, Sep 26 '18 at 02:14
There is also [*textContent*](https://www.w3.org/TR/dom/#dom-node-textcontent). — RobG, Sep 26 '18 at 02:42

score 1 · Accepted Answer · answered Sep 26 '18 at 02:43

1

You can use innerText, instead of innerHTML

 document.getElementById("paragraph").innerText = name;

answered Sep 26 '18 at 02:43

Mesar ali

1,832
2
16
18

score 0 · Answer 2 · answered Sep 26 '18 at 02:21

0

You want to 'escape' the input text before displaying it again.

Your JavaScript would now look like:

var name = escapeHtml(prompt("Enter your name: "));
document.getElementById("paragraph").innerHTML = name;

function escapeHtml(unsafe) {
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
}

Note: This code snippet is from Can I escape html special chars in javascript?

PSA: Please don't use client-side sanitation of text for anything related to security.

answered Sep 26 '18 at 02:21

Arthur-1

265
1
7

Thanks, but the problem was solved earlier. – Jack Bashford Sep 26 '18 at 02:22
Rather than answering with a reference to a duplicate, just mark it as a duplicate. ;-) – RobG Sep 26 '18 at 02:41

How to turn HTML-format user input into text in prompt

2 Answers2