Check if selected text is within a given CSS class?

Question

When the user selects text I need to check two things before performing my final task:

Is the selected text within the main .entry-content div? I've done that.
is the selected text outside or insane any highlighted css class? I need help here.

Basically:

If "his early familiarity" is selected, return false
If "head of the first South African Boerboel club" is selected, return true

The HTML source:

<p>
    <span id="subject-47" class="subject highlighted">Semencic credits his early familiarity with the breed to his own travels to South Africa<span class="count">4</span></span>, but especially to his frequent correspondence with the head of the first South African Boerboel club, one Mr. Kobus Rust. <strong>The Boerboel Breeders Association was established in 1983</strong> in the Senekal district of the Free State with the sole objective of ennobling and promoting the Boerboel as a unique South African dog breed.
</p>

My Current Javascript (working but I need that last check function)

$( window ).load(function() {

    $(document.body).bind('mouseup', function(e){

        snapSelectionToWord();
        var txt = getHTMLOfSelection();
        var contentPos = $('.entry-content').html().indexOf( txt );

        if( contentPos > 0 ) {
            // do my thing here
            // after I check txt IS NOT within a .highlighted css class
        }

    });

});

You could use http://stackoverflow.com/questions/7215479/get-parent-element-of-a-selected-text#answer-7215665 to get the parent class then check if it is equal to highlighted or not. — spaceman, May 03 '16 at 11:35
could you rephrase this question to something more generic ? Confusing is: "text outside or insane any highlighted css class" or "his early familiarity" or "getHTMLOfSelection()" ? Also the css class "highlighted" is around the whole subject and not just somewhat "outside or insane any highlighted css class".... — nils petersohn, May 03 '16 at 11:37

score 0 · Answer 1 · answered May 03 '16 at 11:44

I managed to build a function doing what I wanted.

function isTextInClass( text, css_class ) {

    var result = false;

    $( '.highlighted' ).each( function( index ) {

        if( $( this ).html().indexOf( text ) != 'undefined' ) {

            var foundAt;

            foundAt = $( this ).html().indexOf( text );

            if( foundAt > 0 ) {
                result = true;
            }

        }

    });

    return result;

}

score 0 · Answer 2 · answered May 03 '16 at 12:18

Here is the short form or the answer. If you use window.getSelection().baseNode.parentNode it will give you the node(outer element) of the highlighted text. I will also give you the id or class attached to it. Basically if you store the result of the above snippet in a variable, you can do a id or a .className to get the id and the class respectively.

Here is a sample code $( window ).load(function() {

$(document.body).bind('mouseup', function(e){
    //gets the node(Outer HTML) of the selected txt
    var sell = window.getSelection().baseNode.parentNode;
    alert(sell);
});

});

score 0 · Answer 3 · answered May 03 '16 at 12:22

try this code: https://jsfiddle.net/4pu6cbpo/

$(document.body).bind('mouseup', function(e){

        //snapSelectionToWord();
        var txt = getSelectionParentElement();

        class_select = txt.getAttribute("class");

        if(class_select !== null && class_select.indexOf("highlighted") > -1) {
            alert("highlighted");
          return false;
        } else {
            alert("NO highlighted");
          return true;
        }
        /*
        var contentPos = $('.entry-content').html().indexOf( txt );

        if( contentPos > 0 ) {
            // do my thing here
            // after I check txt IS NOT within a .highlighted css class
        }
        */

    });

    function getSelectionParentElement() {
    var parentEl = null, sel;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.rangeCount) {
                parentEl = sel.getRangeAt(0).commonAncestorContainer;
            if (parentEl.nodeType != 1) {
                parentEl = parentEl.parentNode;
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        parentEl = sel.createRange().parentElement();
    }
    return parentEl;
}

If the parent tag class where selected text has class highlighted return false.

Check if selected text is within a given CSS class?

3 Answers3