javascript - jQuery 获取 html 选择

Question

我在网上搜索了一段时间，试图找到解决方案。我想要做的是将文本选择开始点和结束点转换为等效的 html 选择值。

示例:

HTML: test text **some <span style="color:red">te**st t</span>ext
TEXT: test text **some te**st text

假设用户选择了上面 ** 中包围的部分。我没有问题获取文本选择的位置:开始:10，结束:17。但我想要得到的是包括html元素的选择的位置:开始:10，结束:41

有人可以提出解决方案吗？

编辑:根据要求，我已附加现有代码，该代码获取所选文本的起点和终点。我想要得到的是所选 HTML 的起点和终点。

        var start = 0, end = 0;
        var sel, range, priorRange;
        if (typeof window.getSelection != "undefined") {
                range = window.getSelection().getRangeAt(0);
                priorRange = range.cloneRange();
                priorRange.selectNodeContents(el[ 0 ]);
                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(el[ 0 ]);
                priorRange.setEndPoint("EndToStart", range);
                start = priorRange.text.length;
                end = start + range.text.length;
        }

Answer 1

好的，这就是我想出的解决方案。它获取正常的文本选择点，然后原始地转换为 html 点。这可能只适用于基本情况，但这就是我的应用程序所需要的。

        // this gives me a cross browser start and end position
        // for the text selection
        var start = 0, end = 0;
        var sel, range, priorRange;
        if( typeof window.getSelection != "undefined" ){
                range = window.getSelection( ).getRangeAt( 0 );
                priorRange = range.cloneRange( );
                priorRange.selectNodeContents( el[ 0 ] );
                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( el[ 0 ] );
                priorRange.setEndPoint( "EndToStart", range );
                start = priorRange.text.length;
                end = start + range.text.length;
        }

        // now, get this in terms of html selection
        var html = el.html( ), text = 1, htmlstart = 0, htmlend = 0;
        for( var i = 0, t = 0; i < html.length; ++i ){
                if( html[ i ] == '<' || html[ i ] == '>' ){
                        text = text ? 0 : 1;
                        continue;
                }
                if( text )
                        t++;
                if( t == start )
                        htmlstart = i + 1;
                if( t == end ){
                        htmlend = i + 1;
                        break;
                }
        }