JSFiddle - React, Tailwind, and code Playground

by Egor Jsfiddle

HTML

<textarea id="area" style="margin: 0px; height: 189px; width: 366px;">2222 tdsq 
sdzdssdsss   f         ff
 fdfd
f
 
fds
f
       d  ff 
b
 n
  x
   c
    (f)
     v
      t
       t
        q
         w</textarea>
<pre id="pre">123</pre>
<button id="btn">Клик, замена ' f ' на span с ' f '</button>

CSS

pre {
  border: 1px solid;
  width: 300px;
}

pre span {
  font-weight: bold;
  color: grey;
  font-size: 1.6em;
}

#btn {
  position: fixed;
  top: 10px;
  left: calc(100% - 300px);
}

JavaScript

btn.addEventListener('click', e => {
  let rep = area.value.replace(/f/g, function(full, value) {
    let elemSpan = document.createElement('span');
    elemSpan.innerHTML = value;
    //elemSpan.innerText = value;
    //elemSpan.textContent = value;
    console.log(elemSpan);
    return elemSpan;
    //elemSpan.toString() = [object HTMLSpanElement] [object HTMLSpanElement]
  });
  pre.textContent = rep;
})