JSFiddle - React, Tailwind, and code Playground

HTML

<pre></pre>

CSS

pre {
    width: 100%;
    white-space: pre-wrap;
}

JavaScript

h=(a,b)=>(b.split`,`.map(s=>a=a.replace(eval(`/(^|[^a-z])(${s.replace(/~/g,"")})(?=[^a-z]|$)/gi`),(_,n,o)=>(x=0,n+s.split``.map((q,i)=>(q=='~'&&++x?q:o[i-x])).join``))),a)

log = (a,b) => document.querySelector("pre").textContent += a + "\n" + b + "\n" + h(a, b) + "\n\n";

log("Excellent programming abilities, you work excellently!","ex~cel~lent,pro~gram~ming,abil~i~ties");
log("Superman (sometimes incorrectly spelled \"Super-man\") is super #&%@ing strong.","su~per,some~times,in~cor~rectly,spell~ing");
log("IncONsISTent caPItalizATIon!","in~con~sis~tent,cap~i~tal~iza~tion");
log("Such short words.","awk~ward");
log("Digits123 are456cool789.","dig~its,dig~i~tal,are~cool");
log("magic magic", "ma~gic");