blocks|key|4011531|text|我想你要找的是contenteditable+attr。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4011532|您可以使用该属性使div、span、p等DOM元素成为可编辑的。|4011533|有关更多信息，请访问Making+content+editable+|4011534|另一方面，为了能够从textarea编写超文本标记语言，并将输入的超文本标记语言文本呈现到contenteditable元素中，您需要绑定某种类型的事件，以便获得编写的超文本标记语言，然后将其设置到目标contenteditable元素中。|4011535|​|4011536|var+variable+=+'<b>EleFromStack</b>',
++++tagName+=+document.getElementById('tagName'),
++++textarea+=+document.getElementById('textarea');
++++
textarea.addEventListener('input',+function()+{
++tagName.innerHTML+=+this.value;++
});|code-block|syntax|javascript|4011537|div+{
++width:+300px;
++border:+1px+dashed+#000
}|4011538|<textarea+id='textarea'>
</textarea>

<div+id='tagName'+contenteditable='true'>
</div>|4011539|4011540|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content^0|7|F|0|9|3|D|4|I|1|0|A|O|0|0|A|8|19|F|2T|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]|$9|1D|A|1E|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@]|D|@$9|1G|A|1H|1|1I]]|E|$]]|$1|J|3|K|5|6|7|1J|8|@$9|1K|A|1L|B|C]|$9|1M|A|1N|B|C]|$9|1O|A|1P|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1R|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|P|7|1S|8|@]|D|@]|E|$Q|R]]|$1|U|3|V|5|P|7|1T|8|@]|D|@]|E|$Q|R]]|$1|W|3|M|5|6|7|1U|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1V|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>I think what you're looking for is <code>contenteditable</code> attr.</p>

<p>You can use that attribute in order to make editable a DOM element like <code>div</code>, <code>span</code>, <code>p</code>, and so on.</p>

<p>For more info go to <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content" rel="nofollow noreferrer">Making content editable
</a></p>

<p>On the order hand, to be able to write HTML from a <code>textarea</code> and the entered HTML text be rendered into the <code>contenteditable</code> element, you need to bind some kind of event in order to get the wrote HTML and then set it into the target <code>contenteditable</code> element.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var variable = '&lt;b&gt;EleFromStack&lt;/b&gt;',
    tagName = document.getElementById('tagName'),
    textarea = document.getElementById('textarea');
    
textarea.addEventListener('input', function() {
  tagName.innerHTML = this.value;  
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
  width: 300px;
  border: 1px dashed #000
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea id='textarea'&gt;
&lt;/textarea&gt;

&lt;div id='tagName' contenteditable='true'&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4011615|text|看看您想要使用.textContent来获取不带标签的文本的https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4011616|​|4011617|document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent|code-block|syntax|javascript|4011618|<div+id="html-elements">
<button>hello</button>+<strong><em>world</em></strong>
</div>
<div+id="text"></div>|4011619|4011620|entityMap|0|LINK|mutability|MUTABLE|url|https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/^0|7|C|U|2E|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>Take a look at <a href="https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/" rel="nofollow noreferrer">https://gomakethings.com/two-ways-to-get-and-set-html-content-with-vanilla-javascript/</a> you want to use <code>.textContent</code> to get the text without the tags.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document.getElementById('text').innerHTML=document.getElementById('html-elements').textContent</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="html-elements"&gt;
&lt;button&gt;hello&lt;/button&gt; &lt;strong&gt;&lt;em&gt;world&lt;/em&gt;&lt;/strong&gt;
&lt;/div&gt;
&lt;div id="text"&gt;&lt;/div&gt;
      </code></pre>
</div>
</div>
</p>


blocks|key|4011666|text|我认为您要做的是创建一个输入，然后监听值的变化，并在另一个div中显示内部的html|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4011667|
<input+type="text"+id="input"></input>
<div+id="output"></div>|code-block|syntax|javascript|4011668|然后监听更改并更新输出|4011669|//JS
const+input+=+document.querySelector('#input'),
++++++output+=+document.querySelector('#output');
button.addEventListener('change',+()+=>+{
++output.innerHTML+=+input.value;
})|4011670|(JSBIN：https://jsbin.com/genokox/edit?html,js,console,outputjsbin)|offset|length|4011671|entityMap|0|LINK|mutability|MUTABLE|url|https://jsbin.com/genokox/edit?html,js,console,output|1^0|0|0|0|0|7|1H|0|1O|5|1|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Z|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|11|8|@]|9|@$M|12|N|13|1|14]|$M|15|N|16|1|17]]|A|$]]|$1|O|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]|W|$5|R|S|T|A|$U|V]]]]

<p>I think what you want to do is create an input then listen to the value changes and display the inner html in another div</p>

<pre><code>&lt;!-- HTML --&gt;
&lt;input type="text" id="input"&gt;&lt;/input&gt;
&lt;div id="output"&gt;&lt;/div&gt;
</code></pre>

<p>Then listen to the change and update the output</p>

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

<p>(JSBIN: <a href="https://jsbin.com/genokox/edit?html,js,console,output" rel="nofollow noreferrer">https://jsbin.com/genokox/edit?html,js,console,output</a><a href="https://jsbin.com/genokox/edit?html,js,console,output" rel="nofollow noreferrer">jsbin</a>)</p>


blocks|key|4009184|text|问题是您正在尝试将HTML写入文本区域。文本区域由浏览器引擎保留，用于发布纯文本。不是将内容写到文本区域，而是将其写到DIV或其他设计为包含HTML的内容块中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4009185|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>The problem is you're trying to write HTML into a text area. The text area is reserved, by the browser engine, to post plain text. Instead of writing out your content to a textarea write it to a DIV or some other content block designed to contain HTML.</p>


<p>I'm looking to design a form that will accept HTML tags and convert them into styled text displayed in a separate text area. Think a very simple JSbin. I thought that this would work:</p>

<pre><code> document.getElementById('tagName').innerHTML='variable'
</code></pre>

<p>But this displays the text along with the tags - I just want the tag.</p>

<p>I need some helpful hints or a nudge in the direction I should go. Thanks!</p>


Convert HTML tags and display as styled text using javascript

我希望设计一个表单，将接受HTML标签，并将它们转换为样式的文本显示在一个单独的文本区域。考虑一个非常简单的JSbin。我认为这会起作用： document.getElementById('tagName').innerHTML='variable'但是这会显示文本和标签--我只想要标签。我需要一些有用的提示或推动我应...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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