jQuery 获取 html 选择答案

【问题标题】：jQuery get html selectionjQuery 获取 html 选择
【发布时间】：2013-03-21 21:55: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 元素：开始：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;
        }

【问题讨论】：

请贴出您已经尝试过的代码。理解问题有点困难。
这相当困难，因为用户并没有真正选择 HTML，它已经被浏览器解析，所以它不再作为 HTML 存在，而是作为 DOM 元素存在。例如，可以使用 HTML 内容和跳过标签开始计算字母。
注意像 & 这样的 html 实体将选择一个字符，但在 html 中是多个字符。相邻空格将是一个选定的字符，但在 html 中是多个。

标签： javascript jquery html selection

【解决方案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;
                }
        }

【讨论】：