How to display the content in the textarea like we input

Text content saved in a textarea element in a form has line breaks in the content, but when the page is displayed, the line breaks are generally not shown again.

The reason is that the line break (\r\n) saved in textarea is not recognized by html synatx.

In order to display the same, we can use two method below to solve it:

1. Solve with css

<style>
    .new-line { 
        white-space: pre-wrap;
    }
</style>

2. Use a script or background program to replace the \r\n to the line break directly with a <br /> element

function newLine(text) {
    const replaceRegex = /(\n\r|\r\n|\r|\n)/g;
 
    text = text || '';
 
    return text.replace(replaceRegex, "<br/>");
}