如何格式化 html <textarea> 中的文本？答案

【问题标题】：How to format text in a html <textarea>?如何格式化 html <textarea> 中的文本？
【发布时间】：2015-11-02 22:26:25
【问题描述】：

所以我的页面上有一个<textarea>，当我单击一个按钮时，textarea 中的文本值被分配给我页面上一个段落的.innerHTML。现在假设我在 textarea 中输入类似这样的内容：Hey how's it going ? 该段落看起来像这样 Hey how's it going ?。基本上，它不会在每一行的末尾有<br> 标签。有什么办法可以强制 JS 函数在我的 textarea 每一行的末尾插入 <br> 标签？

或者有更简单的方法吗？

谢谢。

JavaScript 代码：document.getElementById("sendMsgBtn").onclick=function(){ var element = document.createElement("p"); element.style.borderBottom = "1px solid black"; var content = document.createTextNode(document.getElementById("currentMsg").value); content = content.replace( /\n/g, "<br>"); element.appendChild(content); document.body.appendChild(element); document.getElementById("currentMsg").value = ""; }

【问题讨论】：

whatever.innerHTML = yourtext.replace('\n', '<br>');

标签： javascript html formatting textarea

【解决方案1】：

你不想换行。相信我。

只需设置这个：

white-space: pre-wrap;

此 CSS 将使空格变得重要，并在输入时保留它。

【讨论】：

【解决方案2】：

将元素从 textarea 复制到段落标签时，将所有换行符替换为 <br> 标签：

var input = document.getElementById("myTextarea").innerHTML; // get textarea contents
input = input.replace( /\n/g, "<br>"); // replace line breaks with <br> tags
document.getElementById("myParagraph").innerHTML = input; // place html-ified input into your <p>

【讨论】：

谢谢！嗯，你能解释一下为什么我们不这样做： input = input.replace( "\n", "
"); /\n/g 是什么意思？我知道 \n 是什么。
@aCodingN00b 因为那只会替换第一个。 g 修饰符使它影响所有匹配，而不仅仅是第一个。
哦，你不能在文本节点上调用replace方法；你必须在文本本身上调用它。做类似var value = document.getElementById("currentMsg").value; value = value.replace(/\n/g, "<br>"); var content = document.createTextNode(value);
所以基本上只是在创建节点之前替换换行符？谢谢！
哦，对了，创建一个文本节点就可以了。我的错。不要在任何地方调用“document.createTextNode”。直接执行document.getElementById("myParagraph").innerHTML = value;（使用我之前代码示例中的相同变量value）

【解决方案3】：

如果你使用 jQuery，试试这个：

function nl2br (str, is_xhtml) {   
    var breakTag = (is_xhtml || typeof is_xhtml === 'undefined') ? '<br />' : '<br>';    
    return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}

然后： nl2br(yourVariableWithContent); 可用于将换行符（返回按钮生成的）更改为
。

【讨论】：

除此之外，一个更好的跨平台（CR、LF、CRLF）匹配换行符的正则表达式是/(?=[\r\n])\r?\n?/ - 我一直在使用它^_^
糟糕，我在输入这个的时候输入了别的东西 :) 确实不需要 jQuery。