0
180
ViewsSet range to select text accross multiple child nodes
I have some issue to set range to select text within a div.
Here is a fiddle I use for the test.
I succeed do it within first child only using node.firstChild:
let selection = window.getSelection();
var node = document.getElementById("textZone");
var textZone = node.firstChild;
selection.removeAllRanges();
range = document.createRange();
range.setStart(textZone, 0);
range.setEnd(textZone, 2);
selection.addRange(range);
But where I only use node (as per the fiddle), the value of setStart and setEnd will defined the child number of the node instead of the position value of the first and last letter position.
My goal is to be able to proceed selection accross the entire text based on caracter position value. For example, selection should be:
- middle of node child 2 to middle of node child 4
The result to achieve is, when I press the button, I get that selection :
Please let me know if you have any ideas.
Thank you
1 answers
Answer question0
I am not sure what exactly you want to achieve but your approach will not work like this. If you want just to extract the plain text than just do range.toString(); and apply some string functions to get your result.
The problem with document.createRange() is the fact that it works with nodes and what you really want is just a part of a node. Imagine that your node is the parent for others like: <strong>ins<i>is</i>t</strong> .... You will have somehow to split the node and create new nodes with the remaining parts and another nod with the wanted part. So your <strong>insist</strong> should look like
<strong>ins</strong><strong>ist</strong>