In JavaScript range selection is it possible to prevent selection of a partial node? - Jquery

user3012857
January 18, 2023
207 views
0 votes
2 Answers

In JavaScript range selection is it possible to prevent selection of a partial node?

For example:

"The enormous cat sat on the very small rug."

A user might select "cat" and more often than not, their mouse selection is not that precise and includes the visible space either side as well, and thus the selection range nearly always includes "enormous" and "sat" which we do not want.

Each span contains a single word. The visible space in between words could be true whitespace inside a span tag, spans stacked with line-breaks, it could be padding, it also could be css word-space, or even a non-breaking space. Whichever way if the user’s selection strays into another node unintentionally, the default is of course is to return the node as part of the selection.

How can this be avoided?

Any pointers gladly accepted.

Thank you kindly.

Example code:

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

Answers

Here is a script you can build on using 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>

I think i have finally nailed it. Lets take start and end span from selection range and check if trimmed span content equals to trimmed span selection (that part that is actually selected in span). If there is only white space selected or partially selected text in span exclude it from selection. Check for parentNode !== SPAN is for case when only white space is selected.

$(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.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>

UPDATE 19.1.2023:
Another solution can be using selection manipulation as we can expand/shrink selection to the word boundary. See How do I extend selection to word boundary using JavaScript, once only?
The idea is to shrink selection to the word boundary, get selected text, trim and split by regex (one or more whitespace characters):

$(function() {
    $(document).on("mouseup", function(e) {
        const sel = window.getSelection();
        if (!sel.isCollapsed) {
            // Detect if selection is backwards
            const range = document.createRange();
            range.setStart(sel.anchorNode, sel.anchorOffset);
            range.setEnd(sel.focusNode, sel.focusOffset);
            const backwards = range.collapsed;
            range.detach();

            // modify() works on the focus of the selection
            const endNode = sel.focusNode, endOffset = sel.focusOffset;
            sel.collapse(sel.anchorNode, sel.anchorOffset);

            const direction = !backwards ? ['backward', 'forward']: ['forward', 'backward'];

            sel.modify("move", direction[0], "character");
            sel.modify("move", direction[1], "word");
            sel.extend(endNode, endOffset);
            sel.modify("extend", direction[1], "character");
            sel.modify("extend", direction[0], "word");

            console.log( sel.toString().trim().split(/s+/) );
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="test" style="margin: 20px;">
  <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>

Note: strange thing is that selection manipulation works fine on my test page, but not in SO code snippet.

Please signup or login to give your own answer.

Click here to cancel reply.

In JavaScript range selection is it possible to prevent selection of a partial node? – Jquery

Answers