JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div id="output"></div>

CSS

strong { font-weight:bold }
em { font-style:italic }
.un { text-decoration: underline;}

JavaScript

function boldFunc(str, p1, offset, s) {
  return '<strong>'+encodeURIComponent(p1)+'</strong>'
}
    
function italicFunc(str, p1, offset, s) {
  return '<em>'+encodeURIComponent(p1)+'</em>'
}

function underlinedFunc(str, p1, offset, s) {
  return '<span class="un">'+encodeURIComponent(p1)+'</span>'
}
    
    
$str = 'this is a [b]bölded[/b], [i]itälic[/i] and [u]ünderlined[/u] [i]strïng[/i]';

// 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 = [
    boldFunc,
    italicFunc,
    underlinedFunc
];

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