Tengo un área de texto donde los usuarios pueden ingresar texto. Con un botón, deberían poder envolver un texto seleccionado en esta área de texto con etiquetas personalizadas [inicio] [fin].
<button onclick="addTags();">Add Tags to selected Text</button> <textarea id="user-input" name="user-input" rows="4" cols="50"></textarea>Ejemplo: si el texto en el área de texto es, por ejemplo, "1 2 3" y el usuario marca "2" y hace clic en el botón, el resultado en el área de texto debería ser "1 [inicio] 2 [fin] 3".
Estoy tratando de que no funcione una pieza de javascript, eso hará esto por mí.
Jugué con "window.getSelection()". Entonces la pregunta es: ¿Cuál es el enfoque correcto para mi función?
function addTags() { ... }Cortar el texto: antes de la selección, la selección, después de la selección. Luego vuelva a armar con etiquetas.
document.getElementById("add-tag").onclick = () => { let txt = document.getElementById("user-input"); const before = txt.value.substring(0, txt.selectionStart); const sel = txt.value.substring(txt.selectionStart, txt.selectionEnd); const after = txt.value.substring(txt.selectionEnd); txt.value = `${before}[start]${sel}[end]${after}`; }; <button id="add-tag">Add Tags to selected Text</button> <textarea id="user-input" name="user-input" rows="4" cols="50"></textarea>TODO: Manejar caso donde no se selecciona nada.-