Calculate Position of selected text javascript/JQuery?

心不动则不痛 提交于 2019-12-17 07:27:29

问题


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!


回答1:


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



回答2:


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


来源:https://stackoverflow.com/questions/7991474/calculate-position-of-selected-text-javascript-jquery

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!