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

I have a <textarea> on my page, and when I click a button, the value of the text in the textarea is assigned to .innerHTML of a paragraph on my page.

Now let's say I type something like this in the textarea:

Hey
how's
it
going
?

The paragraph would look like this

Hey how's it going ?

Basically, it wouldn't have <br> tags at the end of each row. Is there a way I can force the JavaScript function to insert <br> tags at the end of each row of my textarea, or is there an easier way to do this?

JavaScript code:

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


Solution 1:[1]

When you copy the element from the textarea to the paragraph tag, replace all line breaks with <br> tags:

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>

Solution 2:[2]

If you are using jQuery, try this:

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');
}

Then nl2br(yourVariableWithContent); can be used to change newline characters (the ones that the return button makes) into <br/>.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hayden Schiff
Solution 2 Peter Mortensen

Related Questions