JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <textarea id='textarea' cols='40' rows='7'></textarea>
</div>
<button id='button1'>Parse text by \n</button>
<button id='button2'>Parse text by \n\n</button>
<button id='button3'>Parse text by regex</button>
<button id='button4'>Parse text by regex w/ var</button>
<p id='output'>
</p>

CSS

#output {
    border: 1px solid #000;
}

JavaScript

$("#button1").on("click",function(){
    var text = $("#textarea").val();
    text = text.replace("\n","(br)");
    $("#output").html(text);
});

$("#button2").on("click",function(){
    var text = $("#textarea").val();
    text = text.replace("\n\n","(br)(br)");
    $("#output").html(text);
});

$("#button3").on("click",function(){
    var text = $("#textarea").val();
    text = text.replace(/\n/g, '(br)');
    $("#output").html(text);
});

$("#button4").on("click",function(){
    var text = $("#textarea").val();
    
    var mask = "\n";
    var re = new RegExp(mask,"g");
    text = text.replace(re, '(br)');
    $("#output").html(text);
});