<div class='wrapper'>
  <input type='text' id='controlInput' placeholder='Введите текст испльзуя *'>

  <span class='out'>NONE</span>
  <span class='result'><span class='red'>Hi</span><span class='blue'> - сказал Гена</span></span>
</div>

body {
  background: #333;
  color: #fff;
  font-family: sans-serif
}
input[type="text"]{
  display: block;
  border: 1px solid #888;
  border-radius: 3px;
  padding:8px;
  background: #ddd;
  font-size: 1.2em;
  margin: 0.2em;
  
  float:left;
}
.enter {
  background: #000;
  width: 40px;
  height: 40px;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.out,.result  {
  display: block;
  background: #fff;
  padding: 10px;
  color: #000;
  float:left;
  border: 1px solid #888;
  border-radius: 3px;
  padding:8px;
  background: #ddd;
  font-size: 1.2em;
  margin: 0.2em;
}

const input = document.getElementById('controlInput')
const enter = document.querySelector('.enter')
const out = document.querySelector('.out')

input.addEventListener('input', function(){
  out.innerHTML = ('<span class="red">'+ input.value.replace('*','</span><span class="blue">')+'</span>').replace('<span class="red"></','<span>NONE</');
});