使用 javascript 转换 HTML 标签并显示为样式文本

Question

我正在设计一个表单，该表单将接受 HTML 标签并将它们转换为显示在单独文本区域中的样式文本。想想一个非常简单的 JSbin。我认为这会起作用：

 document.getElementById('tagName').innerHTML='variable'

但这会显示文本和标签 - 我只想要标签。

我需要一些有用的提示或推动我前进的方向。谢谢！

Answer 1

我想你要找的是 contenteditable attr.

您可以使用该属性使 DOM 元素可编辑，例如 div、span、p 等。

有关详细信息，请转至使内容可编辑

在订单方面，要能够从 textarea 写入 HTML 并将输入的 HTML 文本呈现到 contenteditable 元素中，您需要绑定某种事件以获取写入的 HTML，然后将其设置到目标 contenteditable 元素中。

var variable = '<b>EleFromStack</b>',
    tagName = document.getElementById('tagName'),
    textarea = document.getElementById('textarea');
    
textarea.addEventListener('input', function() {
  tagName.innerHTML = this.value;  
});

div {
  width: 300px;
  border: 1px dashed #000
}

<textarea id='textarea'>
</textarea>

<div id='tagName' contenteditable='true'>
</div>

Answer 2

看看 https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/ 你想使用 .textContent 来获取没有标签的文本。

document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent

<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>

Answer 3

我想你要做的是创建一个输入，然后监听值的变化并在另一个 div

中显示内部 html

<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>

然后监听变化并更新输出

//JS
const input = document.querySelector('#input'),
      output = document.querySelector('#output');
button.addEventListener('change', () => {
  output.innerHTML = input.value;
})

(JSBIN: https://jsbin.com/genokox/edit?html,js,console,output jsbin)

Answer 4

问题是您正试图将 HTML 写入文本区域。文本区域由浏览器引擎保留为 post 纯文本。不要将您的内容写入文本区域，而是将其写入 DIV 或其他旨在包含 HTML.

的内容块

使用 javascript 转换 HTML 标签并显示为样式文本

Convert HTML tags and display as styled text using javascript

html

javascript

textarea