JSFiddle - React, Tailwind, and code Playground

HTML

<h2>JavaScript</h2>
<div>
  <textarea id="input-text" cols="30"></textarea>
</div>
<div>
  <a id="output-text"></a>
</div>
<hr>
<div>
  <textarea id="input-html" cols="30"></textarea>
</div>
<div>
  <a id="output-html"></a>
</div>

JavaScript

var plainText = 'First line\nSecond line'; // Back-End textarea data
var html = 'First line\n</br>Second line'; // Back-End text after nl2br()

// document.getElementById("input-text").innerHTML = plainText;
$("#input-text").val(plainText);
// document.getElementById("output-text").innerHTML = nl2br(plainText);
$("#output-text").html(nl2br(plainText));

//document.getElementById("input-html").innerHTML = br2nl(html);
$("#input-html").val(br2nl(html));
//document.getElementById("output-html").innerHTML = html;
$("#output-html").html(html);

/**
 * This function is same as PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @param {boolean} isXhtml Use XHTML 
 * @return {string} Filtered text
 */
function nl2br (str, replaceMode, isXhtml) {

  var breakTag = (isXhtml) ? '<br />' : '<br>';
  var replaceStr = (replaceMode) ? '$1'+ breakTag : '$1'+ breakTag +'$2';
  return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, replaceStr);
}

/**
 * This function inverses text from PHP's nl2br() with default parameters.
 *
 * @param {string} str Input text
 * @param {boolean} replaceMode Use replace instead of insert
 * @return {string} Filtered text
 */
function br2nl (str, replaceMode) {   
	
  var replaceStr = (replaceMode) ? "\n" : '';
  // Includes <br>, <BR>, <br />, </br>
  return str.replace(/<\s*\/?br\s*[\/]?>/gi, replaceStr);
}