Tengo el siguiente escenario: los contenidos se muestran en div. Los usuarios pueden seleccionar palabras de ese contenido. Estoy buscando la selección del usuario usando el método window.getselection().tostring() .
Ahora quiero la ubicación de los contenidos seleccionados dentro span / div .
Por ej. Parent div tiene contenidos como este:
<span>abc xyz abc</span> <div>abc xyz abc</div> <span>abc xyz abc</span>Entonces, si selecciono el 1.er abc del 1.er tramo o selecciono el 2.º abc en el 1.er tramo o selecciono abc abc del 1.er tramo y el segundo div, entonces cuál será la mejor manera de resaltar la parte seleccionada.
Gracias por adelantado
Cómo la siguiente solución puede ser útil
var selection = window.getSelection(); var range = selection.getRangeAt(0); var newNode = document.createElement("span"); newNode.setAttribute("style", "background-color: pink;"); range.surroundContents(newNode);me funciona muy bien:
import React, {useEffect, useRef} from 'react'; const App = () => { const spanInput=useRef(); useEffect(()=>{ console.log(spanInput.current.innerHTML) },[spanInput]) return ( <div> <span ref={spanInput}>test text</span> </div> ); }; export default App;