Calculate Position of selected text javascript/JQuery?

Question

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!

you have a text and want to selected text start and end index ? am i right ? — erimerturk, Nov 03 '11 at 07:40
erimerturk: Precisely Yes. To add more, Start & End index from immediate first character string of inside the body tag. — Mani, Nov 04 '11 at 18:41

Tim Down · Accepted Answer · 2011-11-03T09:48:28.747

Here'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 );

Hi Tim, first of all thanks for rangy! I wonder if you can help me, I have the reverse problem. If I have a parent node and start/end character offsets (as obtained with a method similar to your solution here), how can I get a rangy range from those offsets without regard to any s that may wrap part of the text? — Mike Turley, Feb 09 '12 at 17:01
@Tim Down: It also helps me.. Thanks. Now, what I want is that I want text to return at selected position. — iNikkz, Jul 22 '15 at 10:17

score 3 · Answer 2 · edited Apr 03 '12 at 07:59

3

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);
}

edited Apr 03 '12 at 07:59

pjumble

16,880
6
43
51

answered Apr 03 '12 at 06:55

Mohit kumar

248
3
12

3

Your code will highlight only the selected text but question asked is to highlight based on **given range**. Tim Down has answered exactly what needed. – Mani Apr 03 '12 at 12:52

Calculate Position of selected text javascript/JQuery?

2 Answers2

Linked

Related