Блог

У меня есть следующий сценарий: содержимое отображается в div. Пользователи могут выбирать слова из этого контента. Я выбираю выбор пользователя с помощью window.getselection().tostring() метода.

Теперь мне нужно расположение выбранного содержимого внутри span / div .

Например. У родителя div есть содержимое, подобное этому:

 lt;spangt;abc xyz abclt;/spangt; lt;divgt;abc xyz abclt;/divgt; lt;spangt;abc xyz abclt;/spangt;  

Итак, если я выберу 1-ю азбуку из 1-го пролета, или я выберу 2-ю азбуку в 1-м пролете, или я выберу abc abc из 1-го пролета и второго div, то какой будет лучший способ выделить выбранную часть.

Заранее спасибо

Как нижеприведенное решение может быть полезным

 var selection = window.getSelection(); var range = selection.getRangeAt(0); var newNode = document.createElement("span"); newNode.setAttribute("style", "background-color: pink;"); range.surroundContents(newNode); 

это очень хорошо работает для меня :

 import React, {useEffect, useRef} from 'react';  const App = () =gt; {  const spanInput=useRef();   useEffect(()=gt;{  console.log(spanInput.current.innerHTML)  },[spanInput])    return (  lt;divgt;    lt;span ref={spanInput}gt;test textlt;/spangt;   lt;/divgt;  ); };  export default App;