jQuery获取html选择

jQuery get html selection

本文关键字：选择 html 获取 jQuery      更新时间：2023-09-26

我已经在网上搜索了一段时间，试图找到解决这个问题的方法。我要做的是将文本选择的起始点和结束点转换为相应的html选择值。

的例子:

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

假设用户选择了上面**包围的部分。我没有问题得到文本选择的位置:开始:10，结束:17。但是我想要得到的是选区的位置包括html元素:start: 10, end: 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;
        }

好的，这就是我想到的解决方案。它获得普通文本选择点，然后基本转换为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;
                }
        }
相关文章：