计算所选文本的位置JavaScript / JQuery？

Question

计算所选文本的位置JavaScript / JQuery？

6

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

例如，考虑以下HTML：

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

在从“i”（在“hi”中）到“du”（在“dude”中）进行选择时，我需要获得起始位置2和结束位置4。

注：忽略标签元素。

最好使用Javascript！

- Mani

你有一段文本，想要选择其中的起始和结束索引？我说得对吗？ - erimerturk

类似的东西 http://jsfiddle.net/raynesax/p3nBd/ - Rajat Saxena

erimerturk：确切地说，要补充的是，起始和结束索引从正文标签内的第一个字符字符串开始。 - Mani

1

Rajat Saxena：不起作用！在Firefox上进行了测试。 - Mani

2个回答

3

使用以下 JavaScript 函数可以突出显示 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);
}

- Mohit kumar

3

您的代码仅会突出显示所选文本，但问题要求根据给定范围进行高亮显示。Tim Down已经准确回答了需要的内容。 - Mani

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Tim Down · Accepted Answer

以下是一些简单、天真的代码，可以为您的使用情况提供帮助。它没有考虑任何可能被隐藏的文本（例如通过CSS或位于<script>或<style>元素内部的文本），并且在换行方面可能存在浏览器差异（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 );