How to retrieve the position of selected text by calculating it's offset immediate after body tag?
For Example consider the following html,
<body> <div>hi</div> <div>dude!</div> </body>
on selecting from "i" (in hi) to "du" (in dude), I need to get 2 as start position & 4 as end position.
Note: Ignore the tag elements.
Javascript is preferable!
How to retrieve the position of selected text by calculating it's offset immediate after body tag?
For Example consider the following html,
<body> <div>hi</div> <div>dude!</div> </body>
on selecting from "i" (in hi) to "du" (in dude), I need to get 2 as start position & 4 as end position.
Note: Ignore the tag elements.
Javascript is preferable!
Share Improve this question asked Nov 3, 2011 at 7:30 ManiMani 2,6494 gold badges31 silver badges50 bronze badges 4- you have a text and want to selected text start and end index ? am i right ? – erimerturk Commented Nov 3, 2011 at 7:40
- something similar jsfiddle.net/raynesax/p3nBd – Rajat Saxena Commented Nov 3, 2011 at 9:00
- erimerturk: Precisely Yes. To add more, Start & End index from immediate first character string of inside the body tag. – Mani Commented Nov 4, 2011 at 18:41
- 1 Rajat Saxena: Doesn't Works! Tested on Firefox. – Mani Commented Nov 4, 2011 at 18:49
2 Answers
Reset to default 19Here's some simple, naive code to do this that may well do the job for your use case. It does not take into account any text that may be made invisible (either by CSS or by being inside a or element, for example) and may have browser discrepancies (IE versus everything else) with line breaks, and takes no account of collapsed whitespace (such as 2 or more consecutive space characters collapsing to one visible space on the page). However, it does work for your example in all major browsers.
Live demo: http://jsfiddle.net/UuDpL/2/
Code:
function getSelectionCharOffsetsWithin(element) {
var start = 0, end = 0;
var sel, range, priorRange;
if (typeof window.getSelection != "undefined") {
range = window.getSelection().getRangeAt(0);
priorRange = range.cloneRange();
priorRange.selectNodeContents(element);
priorRange.setEnd(range.startContainer, range.startOffset);
start = priorRange.toString().length;
end = start + range.toString().length;
} else if (typeof document.selection != "undefined" &&
(sel = document.selection).type != "Control") {
range = sel.createRange();
priorRange = document.body.createTextRange();
priorRange.moveToElementText(element);
priorRange.setEndPoint("EndToStart", range);
start = priorRange.text.length;
end = start + range.text.length;
}
return {
start: start,
end: end
};
}
alert( getSelectionCharOffsetsWithin(document.body).start );
Use following java script function for Highlighting the html page..
function stylizeHighlightedString()
{
var range = window.getSelection().getRangeAt(0);
var selectionContents = range.extractContents();
var span = document.createElement("span");
span.appendChild(selectionContents);
span.setAttribute("class","uiWebviewHighlight");
span.style.backgroundColor = "red";
span.style.color = "white";
range.insertNode(span);
}