<pre>, использую string.replace(regexp, replacement);.span, в callback создаю элемент span, помещаю найденный символ в него и возвращаю его. Возвращается строка, т.е. span.toString() -- [object HTMLSpanElement] [object HTMLSpanElement]<pre>, чтобы в теги были опр символы заменены на span, ну а я выделю эти спаны цветом? 
const text = document.querySelector('#area').value;
const pre = document.querySelector('#pre');
pre.innerHTML = text.replace(/f+/g, '<span>$&</span>');