首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用javascript转换HTML标记并显示为带样式的文本

使用javascript转换HTML标记并显示为带样式的文本
EN

Stack Overflow用户
提问于 2018-10-22 07:22:38
回答 4查看 539关注 0票数 0

我希望设计一个表单,将接受HTML标签,并将它们转换为样式的文本显示在一个单独的文本区域。考虑一个非常简单的JSbin。我认为这会起作用:

代码语言:javascript
复制
 document.getElementById('tagName').innerHTML='variable'

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

我需要一些有用的提示或推动我应该去的方向。谢谢!

EN

回答 4

Stack Overflow用户

回答已采纳

发布于 2018-10-22 07:38:52

我想你要找的是contenteditable attr。

您可以使用该属性使divspanp等DOM元素成为可编辑的。

有关更多信息,请访问Making content editable

另一方面,为了能够从textarea编写超文本标记语言,并将输入的超文本标记语言文本呈现到contenteditable元素中,您需要绑定某种类型的事件,以便获得编写的超文本标记语言,然后将其设置到目标contenteditable元素中。

代码语言:javascript
复制
var variable = '<b>EleFromStack</b>',
    tagName = document.getElementById('tagName'),
    textarea = document.getElementById('textarea');
    
textarea.addEventListener('input', function() {
  tagName.innerHTML = this.value;  
});
代码语言:javascript
复制
div {
  width: 300px;
  border: 1px dashed #000
}
代码语言:javascript
复制
<textarea id='textarea'>
</textarea>

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

票数 0
EN

Stack Overflow用户

发布于 2018-10-22 07:45:14

看看您想要使用.textContent来获取不带标签的文本的https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/

代码语言:javascript
复制
document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent
代码语言:javascript
复制
<div id="html-elements">
<button>hello</button> <strong><em>world</em></strong>
</div>
<div id="text"></div>

票数 0
EN

Stack Overflow用户

发布于 2018-10-22 07:53:24

我认为您要做的是创建一个输入,然后监听值的变化,并在另一个div中显示内部的html

代码语言:javascript
复制
<!-- HTML -->
<input type="text" id="input"></input>
<div id="output"></div>

然后监听更改并更新输出

代码语言:javascript
复制
//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)

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52920739

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档