Как получить все теги при выделении текста в contenteditable

150

02 апреля 2019, 01:30

У меня есть div с contenteditable. Например, в нем есть 4 теги p с текстом. И пользователь выбирает текст начиная с середины второго абзаца и до середины третьего. Есть ли возможность получить все p, которые входят в это выделение?

Answer 1

Ещё надо допиливать, но идея примерно такая:

document.addEventListener('selectionchange', function () { 
  var s = getSelection() 
 
  for (var a = s.anchorNode; a && a.tagName !== 'P'; a = a.parentElement); 
  for (var b = s.focusNode;  b && b.tagName !== 'P'; b = b.parentElement); 
 
  if (!a || !b || a.parentElement !== b.parentElement) return 
   
  var res = [], els = a.parentElement.children 
 
  if (a === b) { 
    res.push(a) 
  } else { 
    for (var q=0; q<els.length; ++q) { 
      if (els[q] === a || els[q] === b) { 
        res.push(els[q]) 
        while (res.push(els[++q]), els[q] !== a && els[q] !== b); 
        break 
      } 
    } 
  }   
   
  console.log(res.map(function (x) { return x.textContent }).join("\n")) 
})

p { margin: 0 }

<p>У меня есть div с contenteditable.</p> 
<p>Например, в нем есть 4 теги p с текстом.</p> 
<p>И пользователь выбирает текст начиная с середины второго абзаца и до середины третьего.</p> 
<p>Есть ли возможность получить все p, которые входят в это выделение?</p>