Detect diptongo e hiato

Rodear de etiquetas el texto seleccionado

by Luis Martin

HTML

Palabra: <input type="text" id="etiqueta"><br> <br>
<fieldset>
  <legend>
    Resultado:
  </legend><span id="diptongo">Diptongo</span><span id="hiato">Hiato</span>
  <div id="resultado">

  </div>
</fieldset>

CSS

div {
  border: solid 1px;
  padding: 5px;
  min-height: 15px
}

span {
  padding-right: 10px;
}

b.diptongo {
  color: green;
}

b.hiato {
  color: blue;
}

JavaScript

var palabra_i = $("#etiqueta")
var diptongo = $('#diptongo');
diptongo.hide();
var hiato = $('#hiato');
hiato.hide();

palabra_i.on("change paste keyup", function() {
  var palabra = $(this).val();
  var coincidencia_diptongo = palabra.match(/[iu]h?[iu]|[aeo]h?[iu]|[iu]h?[aeo]/)
  if (coincidencia_diptongo) {
    $('#diptongo').show()
    palabra = palabra.replace(coincidencia_diptongo, "<b class='diptongo'>" + coincidencia_diptongo + "</b>")
    //console.log(palabra)
  } else {
    diptongo.hide();
  }
   var coincidencia_hiato = palabra.match(/[aeo]h?[aeo]|[aeo]h?[íú]|[íú]h?[aeo]/)
  if (coincidencia_hiato) {
    $('#hiato').show()
    palabra = palabra.replace(coincidencia_hiato, "<b class='hiato'>" + coincidencia_hiato + "</b>")
    //console.log(palabra)
  } else {
    hiato.hide();
  }
  $("#resultado").html(palabra)
});