HTML/Javascript - 如何将输入字段中的文本显示为 HTML 代码？答案

【问题标题】：HTML/Javascript - How to display text from input field as HTML code?HTML/Javascript - 如何将输入字段中的文本显示为 HTML 代码？
【发布时间】：2017-09-04 01:01:04
【问题描述】：

我的网页上有一个文本区域，用户可以在其中输入 HTML 代码。我想在网页的其他位置显示该 HTML 代码。我是怎么知道的？

本质上，我想做堆栈溢出在他们的问题询问文本区域中所做的事情，您可以在其中输入 HTML 标记，如strong，当显示文本时，它们将像 this 一样正确显示。另一个例子是用户可能输入一个图像标签，我希望该图像显示在网站的另一部分。

我在后端使用 Node 和 Express 以及 MongoDB 来存储用户输入和 ejs 模板以显示 HTML。

【问题讨论】：

stackoverflow.com/questions/18145682/…的可能重复
Copying text of textarea into div with line breaks的可能重复
走这条路要非常非常小心。像 SO 和其他网站不只是让人们输入 HTML 的原因是它存在很大的安全风险。如果你这样做，你会让你的用户面临持续 XSS 攻击的风险。支持一组非常有限的标记要安全得多，您可以自己将其转换为 HTML 标记。
Cross-site Scripting (XSS)
进入 HTML 的用户是管理员用户，所以我不太担心安全性。而且我不想将文本区域中的文本显示为字符串或文本，而是显示为功能 HTML 代码

标签： javascript jquery html css node.js

【解决方案1】：

$("#htmlinput").on("input",function(){
  $("#target").html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="htmlinput"></textarea>
<div id="target"></div>

【讨论】：

这会将元素的 HTML 设置为在文本区域中输入的文本，但如果有意义的话，我想将该文本显示为有效的 HTML 代码
@Adhaar Sharma - 你的意思是显示从 textarea 到 html 内容的输入文本，即使在尝试重新加载页面时它仍然会保留？为此，您需要一个 ajax 方法。

【解决方案2】：

关于js

function write() {
  var text = document.form.input.value;
  return document.getElementById('id').innerHTML = text;
}

在 html 上

<form name="form">
<textarea onkeyup="write()" name="input"></textarea>
<div id="id"></div>
</form>

【讨论】：

【解决方案3】：

下面是我的代码。在我的 JS 中，我从 textarea 获取值并使用 .innerHTML 属性将其显示到 id 为 output 的 div 元素。此属性设置或返回元素的 HTML 内容（内部 HTML）。

function myInput(){
var y = document.getElementById('textarea').value;
  document.getElementById('output').innerHTML = y;    
}

*{ box-sizing: border-box; }
textarea{ width: 100%; }

#output{
  display:block;
  background:#489ae0;
  color: #fff;
  margin: 0;
  padding: 10px 20px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <textarea id="textarea" placeholder="please input your texts here" oninput="myInput()"/></textarea>
  <div id="output"></div>

【讨论】：