檢查所選文本是否在給定的CSS類中？

Question

當用戶選擇文本時，我需要在執行最終任務之前檢查兩件事：

• 選定的文本是否在主.entry-content div中？ 我做到了。
• 是選定的文本在外面或瘋狂任何突出顯示的 CSS課程？ 我需要幫助。

基本上：

• 如果選擇“他早期熟悉”，則返回false
• 如果選擇“第一個南非Boerboel俱樂部的負責人”，則返回true

HTML源代碼：

<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>

我當前的Javascript（工作，但我需要最后檢查功能）

$( 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
        }

    });

});

Answer 1

我設法建立了一個功能，做我想要的。

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;

}

Answer 2

這是簡短形式或答案。 如果使用window.getSelection().baseNode.parentNode ，它將為您提供突出顯示文本的節點（外部元素）。 我也會給你附上的id或類。 基本上，如果將上述代碼段的結果存儲在變量中，則可以分別使用id或.className來獲取id和類。

這是一個示例代碼$（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);
});

}); 

Answer 3

試試這段代碼： 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;
}

如果所選文本的父標記類突出顯示的類返回false。