JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<div id='wrapper' contenteditable='true'></div>
<div id='view'></div>

CSS

#wrapper {
  border-bottom: 2px solid black;
  margin: 20px 0;
}

span {
  font-weight: bold;
  color: #8e44ad;
}

JavaScript

let wrapper = document.getElementById('wrapper');
let rgx = /([a-zA-Z]+)(\?)/g;

function update() {
    let hits, result;

  hits = wrapper.innerHTML.match(rgx);
    result = wrapper.innerHTML;

  for (let hit of hits) {
    result = result.replace(hit, '<span>' + hit + '</span>');
  }

  view.innerHTML = result;
}

wrapper.addEventListener('input', function(e) {
    update();

  e.preventDefault();
})