在选择中获取特定类的开始和结束节点答案

【问题标题】：Getting start and end nodes of a specific class within a selection在选择中获取特定类的开始和结束节点
【发布时间】：2018-09-29 01:53:39
【问题描述】：

我试图弄清楚如何在用户选择的文本中获取特定类的第一个和最后一个节点。例如，考虑以下 HTML。几个跨度设置为“fresca”类。

<p>
If he tries coming to first <span class="fresca">he will be called</span> for a
balk. Some pitchers will cross over their right knee but not cross
their right foot.
</p>

<p>
A pitcher <span class="fresca">must get</span> to a set position, where
he comes to a <span class="fresca">complete stop</span> after he gets
the sign but before he starts his motion home.
</p>

<p>
A pitcher's <span class="fresca">right foot</span>
must go in the general direction he is throwing.
</p>

例如，如果用户选择“投手必须到达设定的位置，在他到达后完全停止”，那么我的脚本将获得对跨度“必须获得”的引用以及对跨度“完全停止”。

如果用户选择“foot must go”，那么我的脚本会获得两个对跨度“right foot”的引用（或者可能只是一个引用）。

如果用户选择的内容不包含任何“fresca”跨度，那么我的脚本只会得到一个空值（或者可能是一个包含两个空值的数组）。

【问题讨论】：

标签： jquery

【解决方案1】：

function getSelectionHtml() {
    var html = "";
    if (typeof window.getSelection != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount) {
            var container = document.createElement("div");
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                container.appendChild(sel.getRangeAt(i).cloneContents());
            }
            html = container.innerHTML;
        }
    } else if (typeof document.selection != "undefined") {
        if (document.selection.type == "Text") {
            html = document.selection.createRange().htmlText;
        }
    }
    return html;
}

$(function() {
    $(document).on("mouseup",'.select-area', function() {
        // getting the selected html
        var mytext = getSelectionHtml();
        // parse it as html
        myhtml = $.parseHTML(mytext);
        // writing to temporary block
        $('#tmp').html(myhtml);
        // getting fresca elements
        var elements = $('#tmp').find('.fresca');
        var texts = new Array();
        elements.each(function(){
        // Pushing into texts
          texts.push($(this).html());
        }) 
        console.log(texts);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-area">

<p>
If he tries coming to first <span class="fresca">he will be called</span> for a
balk. Some pitchers will cross over their right knee but not cross
their right foot.
</p>

<p>
A pitcher <span class="fresca">must get</span> to a set position, where
he comes to a <span class="fresca">complete stop</span> after he gets
the sign but before he starts his motion home.
</p>

<p>
A pitcher's <span class="fresca">right foot</span>
must go in the general direction he is throwing.
</p>

</div>

<hr/>
<div style="display:none" id="tmp"></div>

在this 问题的帮助下，我写了这个答案。试试看。

【讨论】：