如何在javascript中以数字形式获取选定文本的范围？

【问题标题】：How to get range of selected text in numbers in javascript?如何在javascript中以数字形式获取选定文本的范围？
【发布时间】：2020-07-02 12:23:53
【问题描述】：

我查看了this question 和许多类似的答案，但它们对我没有用，因为它们提供所选部分的纯文本。我想根据父节点而不是其子节点获取起点和终点的索引。

例如给定以下sn-p：

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

我想选择 “我是他” 并获得这些数字：[7,14] 其中 7 是 'i' 的索引，而 14 是 中的 'e' 的索引你好，我在这里”。

当我通过document.getSelection() 选择文本时，起点是 0，终点是 1（因为 span 标签。）如何仅基于 <p>tag （不是 <p> 和 <span>s ）并以数字形式获取起点和终点？

【问题讨论】：

标签： javascript html google-chrome firefox dom

【解决方案1】：

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

【讨论】：