JSFiddle - React, Tailwind, and code Playground

HTML

<div id="comment"></div>

JavaScript

function preg_quote( str ) {
    return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
var var1 = "var1"
    var var2 = "var2"
        var var3 = "var3"
var hh = "this comment will be replaced with var1 var2 var3"
                    html = '<li style="list-style:none;">';
                    cmnt = hh.replace(new RegExp(preg_quote( var1 ), 'gi' ), "<span class='cutecl'>$1</span>");
                    cmnt = cmnt.replace(new RegExp(preg_quote( var2 ), 'gi' ), "<span class='wincl'>$1</span>");
                    cmnt = cmnt.replace(new RegExp(preg_quote( var3 ), 'gi' ), "<span class='failcl'>$1</span>");
                    html += cmnt; 
                    html += '</li>';
                    $('#comment').append(html);