JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<div id="texts">
**this** **would** make it **bold**  __this would__ make it __underlined__ 

__**how about bold and underlined**__ 

and 

**__the other way around__**
</div>

<!-- This would all generate to 


<span class="boldIt">this</span> 
<span class="boldIt">would</span> 
make it
<span class="boldIt">bold</span>  

<span class="underlineIt">this would</span> 
make it
<span class="underlineIt">underlined</span>

<span class="underlineIt boldIt">how about bold and underlined</span>

and 

<span class="boldIt underlineIt">the other way around</span>
-->

CSS

.boldIt { font-weight: bold }
.underlineIt { font-style: italic }

JavaScript

var res = {
    boldIt:/\*\*(.*?)\*\*/g,
    underlineIt:/\_\_(.*?)\_\_/g
}
var s = $("#texts").html();    
$.each(res, function(type, re) {
  s = s.replace(re,'<span class="'+type+'" >$1</span>');
});
$("#texts").html(html);