忽略窗口选择中的跨度雄鹿以获取开始和结束索引

Question

我有一个HTML标签，

<span>This is first text<span class="ignore">Second</span> This is third text<span>

我正在尝试从所选文本中获取开始和结束索引。当我选择第三时，我将开始和结束索引作为34 39 但是我希望27 32

我尝试了以下方法

export const findTextRange = (element) => {
  if (!element) return;
  let start = 0, end = 0;
  let sel, range, priorRange, text;
  if (typeof window.getSelection != "undefined") {
    sel = window.getSelection();
    text = sel + '';
    if (window.getSelection().rangeCount <= 0) {
      return;
    }
    range = window.getSelection().getRangeAt(0);
    priorRange = range.cloneRange();
    priorRange.selectNodeContents(element);
    priorRange.setEnd(range.startContainer, range.startOffset);
    start = priorRange.toString().length;
    end = start + (sel + '').length;
  } else if (typeof document.selection !== "undefined" &&
    (sel = document.selection).type !== "Control") {
    text = sel + '';
    range = sel.createRange();
    priorRange = document.body.createTextRange();
    priorRange.moveToElementText(element);
    priorRange.setEndPoint("EndToStart", range);
    start = priorRange.text.length;
    end = start + (sel + '').length;
  }
  return { start, end, text };
}

，有任何方法可以忽略span element， nighore类。

Answer 1

存储初始HTML，然后删除具有.ignore类的所有元素：

const html = element.innerHTML;
element.querySelectorAll('.ignore').forEach((e) => e.remove());

获得范围后，还原原始HTML：

element.innerHTML = html;

sminippet

const findTextRange = (element) => {
  if (!element) return;
  const html = element.innerHTML; // store original HTML
  element.querySelectorAll('.ignore').forEach((e) => e.remove()); // remove ignore elements
  
  let start = 0, end = 0;
  let sel, range, priorRange, text;
  if (typeof window.getSelection != "undefined") {
    sel = window.getSelection();
    text = sel + '';
    if (window.getSelection().rangeCount <= 0) {
      return;
    }
    range = window.getSelection().getRangeAt(0);
    priorRange = range.cloneRange();
    priorRange.selectNodeContents(element);
    priorRange.setEnd(range.startContainer, range.startOffset);
    start = priorRange.toString().length;
    end = start + (sel + '').length;
  } else if (typeof document.selection !== "undefined" &&
    (sel = document.selection).type !== "Control") {
    text = sel + '';
    range = sel.createRange();
    priorRange = document.body.createTextRange();
    priorRange.moveToElementText(element);
    priorRange.setEndPoint("EndToStart", range);
    start = priorRange.text.length;
    end = start + (sel + '').length;
  }
  element.innerHTML = html;  // restore HTML
  console.log(start, end, text);
  return { start, end, text };
}

document.querySelector('#P').addEventListener('click', function() {findTextRange(this)});

<span id="P">This is first text<span class="ignore">Second</span> This is third text<span>