在 JavaScript 范围选择中是否可以防止选择部分节点？

Question

在 JavaScript 范围选择中是否可以防止选择部分节点？

例如：

“那只巨大的猫坐在非常小的地毯上。”

用户可能会选择“猫“而且通常情况下，他们的鼠标选择不是那么精确，并且还包括两侧的可见空间，因此选择范围几乎总是包括”巨大的“ 和 ”坐着“这是我们不想要的。

每个跨度包含一个单词。单词之间的可见空间可以是 span 标签内的真正空白，用换行符堆叠的 span，它可以是填充，它也可以是 css 单词空间，甚至是一个不间断的空间。无论哪种方式，如果用户的选择无意中误入了另一个节点，默认当然是将节点作为选择的一部分返回。

如何避免这种情况？

欣然接受任何指点。

非常感谢你。

示例代码：

<span id="a1">The </span>
<span id="a2">enormous</span>
<span id="a3"> cat </span><span id="a4">sat</span>
<span id="a5"> on </span><span id="a6" style="padding-right: 2px;">the</span>
<span id="a7">very </span><span id="a8">small </span><span id="a9">rug</span><span id="a10">. </span>

Answer 1

我想我终于搞定了。让我们从选择范围中获取开始和结束跨度，并检查修剪后的跨度内容是否等于修剪后的跨度选择（在跨度中实际选择的部分）。如果在 span 中仅选择了空白或部分选择了文本，则将其从选择中排除。检查 parentNode !== SPAN 适用于仅选择空格的情况。

$(function() {
  $(document).on("mouseup", function(e) {
    const range = document.getSelection().getRangeAt(0);
    let start = range.startContainer.parentNode;
    let end = range.endContainer.parentNode;

    if (start === end) {
      if (start.parentNode.nodeName !== "SPAN") {
        start = null;
        end = null;
      } else {
        const spanContent = start.textContent.slice().trim();
        const spanSelection = range.endContainer.textContent.slice(0, range.endOffset).trim()
        
        if (spanContent !== spanSelection) {
          start = null;
          end = null;
        }
      }
    } else {
      if (end.nodeName !== "SPAN") {
        end = range.endContainer.previousElementSibling;
      } else if (range.endOffset > 0) {
        const spanContent = range.endContainer.textContent.trim();
        const spanSelection = range.endContainer.textContent.slice(0, range.endOffset).trim()
        
        if (!spanSelection || spanContent !== spanSelection) {
          end = end.previousElementSibling;
        }
      }
      if (start.nodeName !== "SPAN") {
        start = range.startContainer.nextElementSibling;
      } else if (range.startOffset > 0) {
        const spanContent = range.startContainer.textContent.trim();
        const spanSelection = range.startContainer.textContent.slice(range.startOffset).trim()

        if (!spanSelection || spanContent !== spanSelection) {
          start = start.nextElementSibling;
        }
      }
    }
    if (start) {
      const x = $(start).index();
      const y = $(end).index();
      const childs = $(start.parentNode).children();
      const result = [];
      
      for (let i = x; i <= y; i++) {
        result.push(childs.eq(i).text().trim());
      }
      console.log(result);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="test">
  <span id="a1">The </span>
  <span id="a2">enormous</span>
  <span id="a3"> cat </span><span id="a4">sat</span>
  <span id="a5"> on </span><span id="a6" style="padding-right: 2px;">the</span>
  <span id="a7">very </span><span id="a8">small </span><span id="a9">rug</span><span id="a10">. </span>
</div>

Answer 2

这是您可以使用Selection API构建的脚本

const container = document.getElementById("container");
const spans = container.querySelectorAll('span');
document.addEventListener('selectionchange', (e) => {
  const sel = window.getSelection();
  const start = sel.anchorNode.parentNode;
  const end = sel.focusNode.parentNode;
  const partialContainment = false;
  if (start != end) {
    console.log("Words: Start", start.textContent, "End:", end.textContent);
    let started = false;
    spans.forEach(span => {
      span.classList = "";

      console.log("containsNode partial", span.id, span.textContent, ':', sel.containsNode(span, partialContainment));
      if (span === start) {
        span.classList.add('start');
        started = true;
      } else if (span === end) {
        span.classList.add('end');
        started = false;
      } else if (started) {
        span.classList.add('middle');
      }
    })
    const middleSpans = [...document.querySelectorAll('span.middle')].map(span => ({
      [span.id]: span.textContent.trim()
    }));
    console.log(JSON.stringify(middleSpans))
  }
})

.start {
  color: green
}

.middle {
  color: orange
}

.end {
  color: red
}

<div id="container">
  <span id="a1">The </span>
  <span id="a2">enormous</span>
  <span id="a3"> cat </span><span id="a4">sat</span>
  <span id="a5"> on </span><span id="a6" style="padding-right: 2px;">the</span>
  <span id="a7">very </span><span id="a8">small </span><span id="a9">rug</span><span id="a10">. </span>
</div>