使用javascript转换HTML标记并显示为带样式的文本
使用javascript转换HTML标记并显示为带样式的文本
提问于 2018-10-22 07:22:38
我希望设计一个表单，将接受HTML标签，并将它们转换为样式的文本显示在一个单独的文本区域。考虑一个非常简单的JSbin。我认为这会起作用：
document.getElementById('tagName').innerHTML='variable'但是这会显示文本和标签--我只想要标签。
我需要一些有用的提示或推动我应该去的方向。谢谢!
回答 4
Stack Overflow用户
回答已采纳
发布于 2018-10-22 07:38:52
我想你要找的是contenteditable attr。
您可以使用该属性使div、span、p等DOM元素成为可编辑的。
有关更多信息，请访问Making content editable
另一方面，为了能够从textarea编写超文本标记语言，并将输入的超文本标记语言文本呈现到contenteditable元素中，您需要绑定某种类型的事件，以便获得编写的超文本标记语言，然后将其设置到目标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>
Stack Overflow用户
发布于 2018-10-22 07:45:14
看看您想要使用.textContent来获取不带标签的文本的https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/。
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>
Stack Overflow用户
发布于 2018-10-22 07:53:24
我认为您要做的是创建一个输入，然后监听值的变化，并在另一个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,outputjsbin)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52920739
复制相关文章
相似问题
腾讯云开发者
