Find range of selected text wrt parent node

Question

I want to find the range of the selected text with respect to the parent element. So in this  element, the anchorOffset & focusOffset for "fox" is [16,19]

<p>The quick brown fox jumps over the lazy dog.</p>

But if we add a  tag before "fox" then the values change to [1,4].

<p>The quick <b>brown</b> fox jumps over the lazy dog.</p>

My best guess is, the index count starts from the end of  tag. But I want it to still show the original value, irrespective of the HTML within . For this, I tried creating a Range, but still couldn't figure it out. Following is the code, as a function.

function rangefun() { var range = document.createRange(); var referenceNode = document.getElementsByTagName('P').item(0); range.selectNode(referenceNode); var selection = window.getSelection(); var start = selection.anchorOffset; var end = selection.focusOffset; console.log("start: " + start); }

TimonNetherlands · Accepted Answer · 2021-02-24 12:38:26Z

Below is a modified version of your code that does what you want.

It takes both the anchor and extent nodes which are children of  from the selection variable (i.e. window.getSelection()).

These two nodes are passed to the calculateOffset function. For each of the nodes, the sum of the text length of the preceding siblings is calculated. Incrementing this total text length with the selection's relative offset (the one in the child node) will yield the start and end offsets with respect to the  text length.

function rangefun() { var selection = window.getSelection(); var start = selection.anchorOffset; var end = selection.extentOffset; var anchorNode = selection.anchorNode; var extentNode = selection.extentNode; var startIndex = calculateOffset(anchorNode, start); var endIndex = calculateOffset(extentNode, end); console.log('start: ' + startIndex); console.log('end: ' + endIndex); } function calculateOffset(child, relativeOffset) { var parent = child.parentElement; // verify whether or not the correct parent element is selected, modify if necessary if (parent.tagName != 'P') { parent = parent.closest('p'); child = child.parentElement; } var children = []; // add the child's preceding siblings to an array for (var c of parent.childNodes) { if (c === child) break; children.push(c); } // calculate the total text length of all the preceding siblings and increment with the relative offset return relativeOffset + children.reduce((a, c) => a + c.textContent.length, 0); }

Thanks, I was able to do this with focusOffset instead of extentOffset.

Collectives™ on Stack Overflow

Find range of selected text wrt parent node

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related