JSFiddle - React, Tailwind, and code Playground

HTML

<h2>JavaScript</h2>
<div>
  <a id="pure"></a>
</div>
<div>
  <textarea id="pure-text" cols="35"></textarea>
</div>
<div>
  <a id="decode"></a>
</div>
<div>
  <textarea id="decode-text" cols="35"></textarea>
</div>

JavaScript

var plainText = '<b>bold</b></textarea>\nNew Line';
var html = '&lt;b&gt;bold&lt;/b&gt;&lt;/textarea&gt;\n<br>New Line'; // PHP for example

// document.getElementById("pure").innerHTML = nl2br(htmlencode(plainText));
$("#pure").html(nl2br(htmlencode(plainText)));
// document.getElementById("pure-text").innerHTML = plainText;
$("#pure-text").val(plainText);
// document.getElementById("decode").innerHTML = html;
$("#decode").html(html);
// document.getElementById("decode-text").innerHTML = htmldecode(br2nl(html));
$("#decode-text").val(htmldecode(br2nl(html)));



/**
 * HTML entities encode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmlencode (str){

  var div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

/**
 * HTML entities decode
 *
 * @param {string} str Input text
 * @return {string} Filtered text
 */
function htmldecode (str){

  var txt = document.createElement('textarea');
  txt.innerHTML = str;
  return txt.value;
}

/**
 * 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);
}