Идея за 5 минут, не претендую на красоту исполнения и отсутствие велосипеда:
создаете новую переменную
text_html, в которой каждая буква из
text будет завернута в тег
let text_html = '<span>h</span><span>e</span> ... <span>r</span>';
// создаете её программно, естественно, работая с DOM
далее ищите нахождение масок в исходном
text и получаете индексы и длину,
по полученным индексам и длине обращаетесь к
text_html, находите нужные элементы и проставляете им стили
после с text_html делаете, что хотите
можно привести в порядок убрав лишние span
как-то так