JSFiddle - React, Tailwind, and code Playground

by Matt Ball

HTML

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

CSS

.cutecl {
    color: pink;
    font-weight: bold;
}

.wincl {
    font-family: monospace;
}

.failcl {
    font-style: italic;
    color: red;
}

JavaScript

function preg_quote(str) {
    return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}

function wrap(data, search, before, after) {
    return data.replace( new RegExp( preg_quote( search ), 'gi' ), before + search + after );
}

var var1 = "var1",
    var2 = "var2",
    var3 = "var3",
    cmnt = "this comment will be replaced with var1 var2 var3";

cmnt = wrap(cmnt, 'var1', '<span class="cutecl">', '</span>');
cmnt = wrap(cmnt, 'var2', '<span class="wincl">', '</span>');
cmnt = wrap(cmnt, 'var3', '<span class="failcl">', '</span>');

$('#comment').append('<li style="list-style:none;">' + cmnt + '</li>');