Как получить диапазон выделенного текста в числах в javascript? - PullRequest
Новая
       8

Как получить диапазон выделенного текста в числах в javascript?

0 голосов
/ 21 марта 2020

Я посмотрел на этот вопрос и много похожих ответов, но они мне не нужны, потому что они дают простой текст выбранного раздела. Я хочу получить индекс начальной и конечной точек на основе родительского Узел не является его потомком.

Например, с учетом следующего фрагмента: 

<p>
    hello,
    <span> i </span>
    am 
    <span> here </span>
</p>

Я хочу выбрать «Я - он» и получить эти числа: [7, 14], который 7 является индексом 'i' и 14 является индексом 'e' в "привет, я здесь" .

когда я получаю выделенный текст по document.getSelection(), начинаем точка равна 0, а конечная точка равна 1 (из-за тегов span). Как я могу получить начальную и конечную точки только на основе тега <p> (не <p> & <span> s) и в числовой форме?

1 Ответ

0 голосов
/ 21 марта 2020

HTML: 

<p>hello,<span> i </span>am<span> here </span></p>

JS: 

// Using mouseup to detect the selection (just for test)

window.addEventListener('mouseup', e => {
  let sel = window.getSelection();
  let p = document.querySelector('p'); // THE ELEMENT TAKEN MANUALY!!!

  console.log(findRangeOfSel(p, sel)); // THE RANGE

});

// function to get the range by getting anchor and focus of selection

function findRangeOfSel(el, sel){
    let range = [];
  range[0] = findIndexOfSymbol(el, sel.focusNode, sel.focusOffset);
  range[1] = findIndexOfSymbol(el, sel.anchorNode, sel.anchorOffset);
  range.sort((a,b) => a - b); //rtl or ltr selection gives same result
  return range;
}

// function to get offset from the start of el
function findIndexOfSymbol(el, node, offset){
    node = node.parentNode == el ? node : node.parentNode;
    let nodes = [...el.childNodes];
  let index = nodes.indexOf(node);
  let num = 0;
  for (let i=0; i < index; i++){
    num += nodes[i].textContent.length;
  }
  return num + offset;
}
...