Javascript 计算可编辑div中范围（高亮显示的文本）的绝对开始和结束

我正在运行一个实验，看看是否可以在contentEditable中返回高亮显示的测试块的绝对起始点和结束点，这对测试div来说实际上并不重要。我没有构建富文本编辑器或任何我只想知道它是如何完成的事情！所以我只想在右键单击时返回两个数字，这并不重要，我只是在搞乱这两个数字，从包装器div的开始到选择的开始的绝对距离，以及从包装器div的开始到选择的结束的绝对距离

我以为Mootools会让这变得简单，但我只能让它们的实现与表单一起工作，例如textarea、input等。因此我使用Google进行了一次快速的bash，当没有涉及标记时，一切都很好，例如，He | llo Wor | ld，其中管道|表示高亮显示的范围将返回[2,9]，这是正确的。但是，当我向div添加标记以允许颜色/格式设置这些数字时，没有任何意义，因为范围仅给出相对于文本节点的位置，而不是绝对值。你知道怎么做吗？我只能想象它涉及到某种形式的可怕的DOM操纵

JS:

HTML:

因此，当我现在选择He | llo Wor | ld时，管道|再次表示高亮显示的范围，它将在我需要[28,42]时返回[2,4]

编辑：我已经更新了代码，以澄清我试图做什么。它做了我想测试的大部分内容，但失去了选择，而且非常邋遢

---

提前谢谢

首先，从范围对象获得的信息尽可能有用：对于范围的每个开始边界和结束边界，您将获得一个DOM节点和该节点内的偏移量、文本或注释节点内的字符偏移量或子节点偏移量，否则，这将完全描述边界。我认为绝对起点和终点是指整个可编辑元素中的两个字符偏移量，但这是一个容易理解的概念：它看起来很简单，但很难确定。例如，一个段落分隔符可以计算多少个字符？A.这是一个

+1，适用于那些想了解如何完成的人，而不是那些只需要代码就可以完成的人。嗨，蒂姆，谢谢你花时间回复！DOM方法的最大问题是，如果我有一个重复的句子，如何知道突出显示了哪一个？i、 内容：你好，世界！你好，世界。另外，我所说的绝对值只是从父容器开始到选择边界位置的字符数，因此a为4，上面的跨度开口是26等。如果我有这些信息，我可以抓取包含部分标记等的完整内容，并选择如何处理数据。@Paul：你似乎认为DOM是HTML字符串，浏览器最初从中构建页面。这通常不是一个有用的思考方式。首先，DOM是一棵树。其次，一旦浏览器从页面的HTML构建了DOM，就没有可靠的方法返回初始HTML字符串，因此该字符串中的任何偏移量基本上是没有意义的。你到底想做什么？我一点也不被DOM搞糊涂，但我对它也不感兴趣！我只是希望能够将突出显示区域的HTML内容（包括它包含的任何标记）返回给JS函数，并知道它在HTML中的开始/结束位置。我真不敢相信有更多的人不相信！没有隐藏的议程，没有必要的用例，我真的很想知道如何可靠地完成它。@Paul:好的。对不起，如果我听起来是居高临下。然而，我仍然不明白为什么DOM的字符串表示中的偏移量是有用的，这就是为什么我想知道一旦你得到了这些信息，你想对它们做什么。嗨，Tim，我没有生气，我只是想澄清一下，我只是想知道文本选择在div中的位置。这样你就可以简单地通过AJAX调用对内容进行操作，在更正部分标记时将选择内容包装在新标记中，等等，但是我也没有计划，只是需要一个字符串来处理。我已经将代码更新到了我想要的版本，但是必须有一个适当的、不那么草率的方法来实现这一点！

window.addEvent('domready', function()
    {
        document.body.addEvent('contextmenu', 
            function(e)
            {
                e.stop();
            }
        );

        if(!window.SelectionHandler)
        {
            SelectionHandler = {};
        }

        SelectionHandler.Selector = {};

        SelectionHandler.Selector.getSelected = function()
        {
            var userSelection = '';

            if(window.getSelection)
            {
                userSelection = window.getSelection();
            }
            else if(document.getSelection)
            {
                userSelection = document.getSelection();
            }
            else if(document.selection)
            {
                userSelection = document.selection.createRange();
            }

            return userSelection;
        }

        SelectionHandler.Selector.getText = function(userSelection)
        {
            var selectedText = userSelection;

            if(userSelection.text)
            {
                selectedText = userSelection.text;
            }

            return selectedText;
        }

        SelectionHandler.Selector.getRange = function(userSelection)
        {
            if(userSelection.getRangeAt && typeof(userSelection.getRangeAt) != 'undefined')
            {
                var selectedRange = userSelection.getRangeAt(0);
            }
            else
            {
                var selectedRange = document.createRange();
                selectedRange.setStart(userSelection.anchorNode, userSelection.anchorOffset);
                selectedRange.setEnd(userSelection.focusNode, userSelection.focusOffset);
            }

            return selectedRange;
        }

        $('mydiv').addEvent('mousedown', 
            function(event)
            {
                if(event.rightClick)
                {
                    var userSelection   = SelectionHandler.Selector.getSelected();
                    var selectedText    = SelectionHandler.Selector.getText(userSelection);
                    var selectedRange   = SelectionHandler.Selector.getRange(userSelection);

                    // New ranges to add identifiable nodes (must be in that order!?)
                    var endRange = document.createRange();
                    endRange.setStart(selectedRange.endContainer, selectedRange.endOffset);
                    endRange.insertNode(document.createTextNode('!~'));

                    var startRange = document.createRange();
                    startRange.setStart(selectedRange.startContainer, selectedRange.startOffset);
                    startRange.insertNode(document.createTextNode('~!'));

                    // Find the position of our new identifiable nodes (and account for their removal)
                    var div_content = $('mydiv').get('html');
                    var start       = div_content.indexOf('~!');
                    var end         = div_content.indexOf('!~') - 2;

                    // Remove our identifiable nodes (DOESN'T WORK)
                    //startRange.deleteContents();
                    //endRange.deleteContents();

                    // This does work, but obviously loses the selection
                    div_content = div_content.replace('~!', '').replace('!~', '');
                    $('mydiv').set('html', div_content);

                    console.log(start + ' vs ' + end);
                }
            }
        );
    }
);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Edit Range Test</title>
 </head>

 <script type="text/javascript" src="mootools.js"></script>
 <script type="text/javascript" src="edit_range.js"></script>

 <style>
    #mydiv {
        width: 400px;
        height: 400px;
        border: 1px solid #a2a2a2;
        padding: 5px;
    }
 </style>

 <body>
    <h1>Edit Range Test</h1>

    <div id="mydiv" contentEditable="true"><span style="color: red;">Hello</span> World! <span style="color: red;">Hello</span> World! </div>

 </body>
</html>