如何格式化 HTML <textarea> 中的文本？

Question

我的页面上有一个 <textarea>，当我点击一个按钮时，textarea 中的文本值被分配给 .innerHTML 我页面上的一个段落。

现在假设我在 textarea 中输入了这样的内容：

Hey
how's
it
going
?

段落看起来像这样

Hey how's it going ?

基本上，它不会在每行末尾有
标记。有没有一种方法可以强制 JavaScript 函数在我的文本区域每一行的末尾插入
标签，或者有更简单的方法来做到这一点？

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 = "";
}

Answer 1

当您将元素从文本区域复制到段落标签时，将所有换行符替换为 <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>

Answer 2

如果您使用的是 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, '' + breakTag + '');
}

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

Answer 3

您不需要换行符。相信我。

只需设置：

white-space: pre-wrap;

这 CSS 将使空格变得有意义，并在键入时保留它。

如何格式化 HTML <textarea> 中的文本？

How can I format text in an HTML <textarea>?

html

javascript

formatting

textarea