JSFiddle - React, Tailwind, and code Playground

HTML

<div id='output'></div>

JavaScript

var $str = "<SPAN STYLE=&quot;&quot; >No Attachments.<BR></SPAN><SPAN style=&quot;font-weight: bold&quot; >Reaction<SPAN STYLE=&quot;font-style:italic&quot; >: After you deploy this unit, discard 1 card at random from your opponent&rsquo;s hand.</SPAN>sdaf</SPAN>asdf";


// The array of regex patterns to look for
$format_search =  [
    /<SPAN STYLE=&quot;&quot; >(.*?)\<\/SPAN>/ig,
    /<SPAN\s*style=&quot;font-weight: bold&quot; >(.*?)\<\/SPAN>/ig,
    /<SPAN\s*style=&quot;font-style:italic&quot; >(.*?)\<\/SPAN>/ig,
    /\[u\](.*?)\[\/u\]/ig,
    /<BR>/ig
]; // NOTE: No comma after the last entry

// The matching array of strings to replace matches with
$format_replace = [
    '$1',
    "<strong class='bbc'>$1</strong>",
    "<em class='bbc'>$1</em>",
    "<span style='text-decoration: underline;'>$1</span>",
    "<br />"
];

// Perform the actual conversion
for (var i =0;i<$format_search.length;i++) {
  $str = $str.replace($format_search[i], $format_replace[i]);
}
document.getElementById('output').innerHTML=$str;
console.log($str);