1

我一直在网上搜索一段时间，试图找到解决这个问题的方法。我想要做的是将文本选择的起点和终点转换为它们等效的 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;
        }
4

1 回答 1

0

好的，这是我想出的解决方案。它获取正常的文本选择点，然后原始转换为 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;
                }
        }
于 2013-03-21T13:55:26.260 回答