繁体   English   中英

显示带换行符的输出textarea

[英]Show output textarea with line breaks

我正在尝试显示textarea的内容,包括任何换行符。

  var text =  document.getElementById("textInput").value    ;    
  text = text.replace(/[\n|\r\n]/g,"<br />");
  document.getElementById("voorwoord-voorbeeld-tekst-links").firstChild.nodeValue = text;

替换工作正常,但显示:dfsdsf <br ss <br /> df <br sdf <br />而不是休息

我怎样才能解决这个问题? 我搜索了整个网络,但找不到它..

尝试设置元素的innerHTML:

document.getElementById("voorwoord-voorbeeld-tekst-links").firstChild.innerHTML = text;

如何在 HTML 中将换行符显式显示为“\n”<textarea> &lt;i&gt;tag?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;标签?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 我正在编写一个简单的 web 应用程序,它将纯文本转换为 python 代码。</p><p> 示例:这是我的纯文本 ----&gt; print("这是我的纯文本")</p><p> 纯文本存储在常规文本区域中。 output 文本存储在禁用的文本区域中。</p><p> 问题:HTML 自动解析 \n,我还没有找到将 \n 保存在 output 文本区域内的好方法。 这是一个问题,因为复制 output 文本区域内的内容无法正常工作。</p><p> 这是我正在尝试做的事情:</p><p> 输入:Foo Bar</p><p> Output:打印(“Foo\nBar”)</p><hr><p> 源代码: </p><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"> function set(el, text) { while (el.firstChild) el.removeChild(el.firstChild); el.appendChild(document.createTextNode(text)) } /* setupUpdater will be called once, on page load. */ function setupUpdater() { var input = document.getElementsByTagName('textarea')[0], output = document.getElementsByTagName('textarea')[1], timeout = null; function handleChange() { //string.replace(/[\n]/g, '\n') var inputText = input.value; set(output, "print(\"" + inputText + "\")"); ("\n"); } /* eventHandler is called on keyboard and mouse events. If there is a pending timeout, it cancels it. It sets a timeout to call handleChange in 0ms. */ function eventHandler() { if (timeout) clearTimeout(timeout); timeout = setTimeout(handleChange, 0); } input.onkeydown = input.onkeyup = input.onclick = eventHandler; } setupUpdater(); document.getElementsByTagName('textarea')[0].focus();</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="grid-container"&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here"&gt;&lt;/textarea&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" readonly&gt;print("")&lt;/textarea&gt; &lt;/div&gt;</pre></div></div><p></p><p> 我很乐意澄清我没有解释的任何事情,但我确实希望这个问题和我想要达到的目标是明确的。</p></div>

[英]How can I explicitly show line breaks as “\n” inside a HTML <textarea> tag?

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 限制文本区域中的换行符 渲染文本区域中输入的换行符 .value是否可以防止文本区域中的换行? AngularJS Textarea不处理换行符 用换行符存储文本区域的内容 使用换行符将文本附加到textarea 检测textarea自然换行 从 textarea 中删除换行符和分段符 Textarea - 获取每一行,找到换行符 如何在 HTML 中将换行符显式显示为“\n”<textarea> &lt;i&gt;tag?&lt;/div&gt;&lt;/i&gt;&lt;b&gt;标签?&lt;/div&gt;&lt;/b&gt;</textarea><div id="text_translate"><p> 我正在编写一个简单的 web 应用程序,它将纯文本转换为 python 代码。</p><p> 示例:这是我的纯文本 ----&gt; print("这是我的纯文本")</p><p> 纯文本存储在常规文本区域中。 output 文本存储在禁用的文本区域中。</p><p> 问题:HTML 自动解析 \n,我还没有找到将 \n 保存在 output 文本区域内的好方法。 这是一个问题,因为复制 output 文本区域内的内容无法正常工作。</p><p> 这是我正在尝试做的事情:</p><p> 输入:Foo Bar</p><p> Output:打印(“Foo\nBar”)</p><hr><p> 源代码: </p><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"> function set(el, text) { while (el.firstChild) el.removeChild(el.firstChild); el.appendChild(document.createTextNode(text)) } /* setupUpdater will be called once, on page load. */ function setupUpdater() { var input = document.getElementsByTagName('textarea')[0], output = document.getElementsByTagName('textarea')[1], timeout = null; function handleChange() { //string.replace(/[\n]/g, '\n') var inputText = input.value; set(output, "print(\"" + inputText + "\")"); ("\n"); } /* eventHandler is called on keyboard and mouse events. If there is a pending timeout, it cancels it. It sets a timeout to call handleChange in 0ms. */ function eventHandler() { if (timeout) clearTimeout(timeout); timeout = setTimeout(handleChange, 0); } input.onkeydown = input.onkeyup = input.onclick = eventHandler; } setupUpdater(); document.getElementsByTagName('textarea')[0].focus();</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="grid-container"&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" placeholder="Enter your plain text here"&gt;&lt;/textarea&gt; &lt;textarea name="plainText" id="plainText" cols="40" rows="40" readonly&gt;print("")&lt;/textarea&gt; &lt;/div&gt;</pre></div></div><p></p><p> 我很乐意澄清我没有解释的任何事情,但我确实希望这个问题和我想要达到的目标是明确的。</p></div>
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM