简体   繁体   English

如何通过Range对象和window.getSelection()获取与body相关的Character偏移量?

[英]how can I get the Character offset related to body with Range Object and window.getSelection()?

I'm writing a client-side application with Javascript, I'm using the following functions : 我正在用Javascript编写客户端应用程序,我正在使用以下函数:

function creation() {
var userSelection;
if (window.getSelection) {
    userSelection = window.getSelection();
}
else if (document.selection) { // should come last; Opera!
    userSelection = document.selection.createRange();
}

var rangeObject = getRangeObject(userSelection);
var startOffset = rangeObject.startOffset;
var endOffset = rangeObject.endOffset;
var startCon = rangeObject.startContainer;
var endCon = rangeObject.endContainer;
var myRange = document.createRange();
myRange.setStart(startCon,rangeObject.startOffset);
myRange.setEnd(endCon, rangeObject.endOffset);
$('#result').text(myRange.toString());
}

function getRangeObject(selectionObject) {
if (selectionObject.getRangeAt) {
    var ret = selectionObject.getRangeAt(0);
    return ret;
}
else { // Safari!
    var range = document.createRange();
    range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset);
    range.setEnd(selectionObject.focusNode, selectionObject.focusOffset);
    return range;
     }
}

I need a way to know the character offset related to body element. 我需要一种方法来了解与body元素相关的字符偏移量。 I found a function with counts the character in an element : 我找到了一个函数来计算元素中的字符:

function getCharacterOffsetWithin(range, node) {
var treeWalker = document.createTreeWalker(
        node,
        NodeFilter.SHOW_TEXT,
        function (node) {
            var nodeRange = document.createRange();
            nodeRange.selectNode(node);
            return nodeRange.compareBoundaryPoints(Range.END_TO_END, range) < 1 ?
                    NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
        },
        false
);

var charCount = 0;
while (treeWalker.nextNode()) {
    charCount += treeWalker.currentNode.length;
}
if (range.startContainer.nodeType == 3) {
    charCount += range.startOffset;
}
return charCount;
}

That looks like a function from one of my answers. 这看起来像我的一个答案中的函数。 I overcomplicated it a little; 我过分复杂了一点; see this answer for a simpler function that works in IE < 9 as well: https://stackoverflow.com/a/4812022/96100 . 请参阅此答案,了解一个在IE <9中运行的更简单的功能: https//stackoverflow.com/a/4812022/96100 You can just pass in document.body as the node parameter. 您只需传入document.body作为node参数即可。 Also, please read the part in the linked answer about the shortcomings of this approach. 另外,请阅读链接答案中有关此方法缺点的部分。

Here's a live demo: http://jsfiddle.net/PzQjA/ 这是一个现场演示: http//jsfiddle.net/PzQjA/

Has this been "solved" in a way to get the caretOffset inside innerText and not textContent ? 这是否已经“解决”了在内部文本而不是textContent中获取caretOffset的方法?

I've got a solution that works, after a select via double-click is made ... 通过双击选择后,我有一个有效的解决方案......

A better way to extract innerText around getSelection() 在getSelection()周围提取innerText的更好方法

Is there even a better way? 还有更好的方法吗?

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM