getSelection… опять. Как определить в каком елементе находиться выделенное слово?

315

04 октября 2017, 10:49

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;
}

например есть:

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

посредством функции getSelection выбираем слово "качество". Как получить ссылку именно на тот абзац, в котором находиться это слово?

Answer 1

Элемент, в котором находится начало выделенного текста -

window.getSelection().anchorNode

конец выделенного текста -

window.getSelection().focusNode

скорее всего это будет textNode, так что вам нужен

window.getSelection().anchorNode.parentElement

Документация объекта Selection

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как получить JSON файл и распасить его?

Добрый деньУ меня имеется json файл в хранящийся на компе, как его можно прочитать и распарсить с помощью JS(XMLHttpRequest), чтобы в дальнешем использовать?...

240

javascript