计算所选文本 javascript/JQuery 的位置?

Posted

技术标签:

【中文标题】计算所选文本 javascript/JQuery 的位置?【英文标题】:Calculate Position of selected text javascript/JQuery? 【发布时间】:2011-12-20 22:42:05 【问题描述】:

如何通过计算正文标记后的偏移量来检索所选文本的位置?

例如考虑以下html

<body> <div>hi</div> <div>dude!</div> </body>

在从“i”(嗨)到“du”(在花花公子)中选择时,我需要将 2 作为开始位置,将 4 作为结束位置。

注意:忽略标签元素。

最好使用javascript

【问题讨论】:

您有一个文本并且想要选定文本的开始和结束索引?我说的对吗? 类似jsfiddle.net/raynesax/p3nBd erimerturk:没错。要添加更多内容,请从正文标记内的第一个字符串开始和结束索引。 Rajat Saxena:没用!在 Firefox 上测试。 【参考方案1】:

这里有一些简单、幼稚的代码来执行此操作,它们可能很适合您的用例。它不考虑任何可能变得不可见的文本(例如,通过 CSS 或通过在 a or 元素内),并且可能存在带有换行符的浏览器差异(IE 与其他所有内容),并且不考虑折叠的空白(例如 2 个或更多连续的空格字符折叠到页面上的一个可见空间)。但是,它在所有主流浏览器中都适用于您的示例。

现场演示: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 );

【讨论】:

嗨,蒂姆,首先感谢 rangy!我想知道你是否可以帮助我,我有相反的问题。如果我有一个父节点和开始/结束字符偏移量(通过类似于您的解决方案的方法获得),我如何从这些偏移量中获得一个范围广泛的范围,而不考虑任何可能包含部分文本的 ? @Tim Down:它也对我有帮助……谢谢。现在,我想要的是我希望文本返回到选定的位置。【参考方案2】:

使用以下 java 脚本函数来突出显示 html 页面..

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

【讨论】:

您的代码将仅突出显示选定的文本,但提出的问题是根据给定范围突出显示。 Tim Down 已经准确地回答了所需要的。

以上是关于计算所选文本 javascript/JQuery 的位置?的主要内容,如果未能解决你的问题,请参考以下文章

javascript jquery移动代码,用于检查单选按钮结果,多项选择

在 Javascript/JQuery 中选择单选选项时,是不是可以动态更改下拉列表的颜色或更改列表项的颜色?

是否可以使用 JavaScript/jQuery 解决这种情况? [复制]

如何使用 jquery/javascript 将文本插入 json [重复]

JavaScript / jQuery:如何在 Firefox 中获取选定的文本

更改跨度文本值 JavaScript/jQuery