如何在提示中将 HTML 格式的用户输入转换为文本

Question

我想要一个 prompt 框询问用户的姓名。但是我将其直接放入页面中，如果我输入某些内容 HTML-y（例如 <canvas>），那么它将将该元素放置在页面中。我怎样才能把它变成文本，而不是制作一个 <canvas> 元素，而是将 <canvas> 作为文本写入页面？

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

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

不幸的是我不能使用jQuery，所以纯 JS 解决方案会很好。

Answer 1

您想 'escape' 再次显示之前输入的文本。

您的 JavaScript 现在看起来像：

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;");
}

注意：此代码片段来自 Can I escape html special chars in javascript?

公益广告：请不要将客户端文本清理用于任何与安全相关的内容。

Answer 2

您可以使用 innerText，而不是 innerHTML

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

如何在提示中将 HTML 格式的用户输入转换为文本

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

javascript

html

prompt