getSelection ... again. How to determine which element contains the highlighted word?

Question

function getSelectionText() { var text = ""; var activeEl = document.activeElement; var activeElTagName = activeEl ? activeEl.tagName.toLowerCase() : null; if ( (activeElTagName == "textarea") || (activeElTagName == "input" && /^(?:text|search|password|tel|url)$/i.test(activeEl.type)) && (typeof activeEl.selectionStart == "number") ) { text = activeEl.value.slice(activeEl.selectionStart, activeEl.selectionEnd); } else if (window.getSelection) { text = window.getSelection().toString(); } return text; }

for example there is:

 <p>Миссия — повышать качество жизни людей , приобщая их к мировой эногастрономической культуре.</p> <p>Шаг за шагом реализовать эту миссию нам помогает интегрированный подход к ведению бизнеса: собственная школа сомелье, книжное издательство, эногастрономическое туристическое агентство и другие проекты. </p>

Using the function getSelection select the word "quality". How to get a link exactly to the paragraph in which the word is located?

Answer 1 · 2017-10-03T12:30:53

The element in which the beginning of the selected text is

 window.getSelection().anchorNode

end of selected text -

 window.getSelection().focusNode

most likely it will be textNode, so you need

 window.getSelection().anchorNode.parentElement

Documentation of the Selection Object

 document.addEventListener("selectionchange", event => { const startNode = window.getSelection().anchorNode; const endNode = window.getSelection().focusNode; console.log( startNode.nodeName, startNode.parentElement, endNode.nodeName, endNode.parentElement ); })

 <b>Миссия — повышать качество жизни людей , приобщая их к мировой эногастрономической культуре.</b> <p>Шаг за шагом реализовать эту миссию нам помогает интегрированный подход к ведению бизнеса: собственная школа сомелье, книжное издательство, эногастрономическое туристическое агентство и другие проекты. </p>

getSelection ... again. How to determine which element contains the highlighted word?

1 answer 1

More articles: