Imagina que tengo algún elemento
<p>Hello</p> el usuario hace clic entre las letras e y l (coloque el signo de intercalación en este lugar), en este clic quiero insertar algún element entre esas letras. Será
<p>He<b>Here</b>llo</p>hay alguna forma de hacerlo?
Ejemplo de código:
const selection = document.getSelection(); const parent = selection.baseNode.parentNode; const b = document.createElement('b') b.innerHTML = 'Here' parent.innerHTML = 'he'+ b + 'llo'No funcionará como entiendes, necesito una solución para este caso. Posición de intercalación que puedo determinar
selection.focusOffset y esto significa que tengo que obtener el texto de selección e insertar el elemento <b>Here</b> en la posición de intercalación. También intenté encontrar un método para convertir el elemento en una cadena, pero no lo he encontrado. Me refiero a document.createElement(tagName) como una cadena, luego puedo insertarlo en el texto
Puede usar el método insertNode de un Rango en la Selección para hacerlo.
He aquí un ejemplo básico:
const p = document.querySelector('p') p.addEventListener('click', () => { const selection = document.getSelection(); if(!selection.isCollapsed || !selection.containsNode(p, true)) return const b = document.createElement('b') b.innerText = 'here' const range = selection.getRangeAt(0) range.insertNode(b) range.collapse() //unselect inserted text }) <p>Some text</p> const selection = document.getSelection(); const text = selection.anchorNode.data; const parent = selection.baseNode.parentNode; const position = selection.focusOffset; const html = [ text.slice(0, position), createdElementSpan.outerHTML, text.slice(position), ].join(''); parent.innerHTML = html; Parece que funciona, cadena de retorno de propiedad outerHTML . Pero también tengo que averiguar cómo poner el cursor en la posición correcta