JSFiddle - React, Tailwind, and code Playground

by Comatose

HTML

<div id="output">this is a [b]bolded[/b], [i]italic[/i] and [u]underlined[/u] string</div>

CSS

strong { font-weight:bold }
em { font-style:italic }

JavaScript

$str = 'this is a [b]bolded[/b], [i]italic[/i] and [u]underlined[/u] string';

// The array of regex patterns to look for
$format_search =  [
    /\[b\](.*?)\[\/b\]/ig,
    /\[i\](.*?)\[\/i\]/ig,
    /\[u\](.*?)\[\/u\]/ig
]; // NOTE: No comma after the last entry

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

// 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;