Select and tag

Rodear de etiquetas el texto seleccionado

by Luis Martin

HTML

Etiqueta: <input type="text" id="etiqueta">
<br><br> Texto:
<div id="text" contenteditable="true">
  Probando el seleccionar texto y que se rodee de etiquetas
</div>
<br> Resultado:
<div id="resultado">

</div>

CSS

div {
  border: solid 1px;
  padding: 5px;
}

JavaScript

var text = $("#text")

text.mouseup(function() {

  var selected = window.getSelection().toString()

  var etiqueta = $("#etiqueta").val().trim();

  if (etiqueta && selected) {
    text.text(text.text().replace(selected, "<" + etiqueta + ">" + selected + "</" + etiqueta + ">"))
    $("#resultado").html(text.text())
  }
})

$("#resultado").html(text.text())