JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" value="[b]bold[/b]<p>hello</p>" />
<div style="border:1px solid;"></div>

JavaScript

String.prototype.htmlEncode = function () {
    return $('<div/>').text(this).html();
};

function replaceEntities(value) {

    return value.replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>")
        .replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>")
        .replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>")
        .replace(/\[s\]/g, "<s>").replace(/\[\/s\]/g, "</s>")
        .replace(/\[img\]/g, "<br/><p></p><img src='").replace(/\[\/img\]/g, "' /><br/><p></p>")
        .replace(/\[link/g, "<a").replace(/URL="/g, "href='").replace(/"\]/g, "'>").replace(/\[\/link\]/g, "</a>")
        .replace(/\[code/g, "<pre").replace(/type="/g, "class='brush:").replace(/"\]/g, "'>").replace(/\[\/code\]/g, "</pre>");

}

var rawValue = $('input').val();
var htmlEncoded = rawValue.htmlEncode();
var newHtml = replaceEntities(htmlEncoded);

$('div').html(newHtml);