Getting start and end nodes of a specific class within a selection

Question

I'm trying to figure out how to get the first and last node of a specific class within the text that has been selected by a user. For example, consider the following HTML. Several spans are set to the class "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>

If, for example, the user selects "A pitcher must get to a set position, where he comes to a complete stop after he gets" then my script would get a reference to the span "must get" and also to the span "complete stop".

If the user selects "foot must go" then my script gets two references to the span "right foot" (or maybe just one reference).

If the user selects something that does not contain any of the "fresca" spans then my scripts just gets a null (or maybe an array of two nulls).

score 0 · Answer 1 · answered Sep 29 '18 at 04:02

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>

With help of this question I wrote this answer. try it.

Getting start and end nodes of a specific class within a selection

1 Answers1