计算所选文本javascript / JQuery的位置? [英] Calculate Position of selected text javascript/JQuery?

查看:107
本文介绍了计算所选文本javascript / JQuery的位置?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何通过计算body标签后的偏移量来检索选定文本的位置?

例如,考虑下面的html,

 < body> < DIV>喜< / DIV> < DIV>哥们<!/ DIV> < /体> 

从i(hi)到du(花花公子)以2作为起始位置& 4作为结束位置。

注意:忽略标记元素。



Javascript更好!

解决方案

以下是一些简单,朴素的代码,可以为您的用例做好工作。它没有考虑到可能无法看到的任何文本(例如,通过CSS或通过位于a或元素内部),并且可能存在浏览器差异(IE与其他所有内容)换行符,并且不考虑折叠的空白(如连续两个或多个空格字符折叠到页面上的一个可见空间)。然而,它适用于所有主流浏览器的示例。



现场演示: http://jsfiddle.net/UuDpL/2/



代码:

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


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!

解决方案

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

这篇关于计算所选文本javascript / JQuery的位置?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆