window.getSelection() игнорировать определенные теги

Question

Ниже мой HTML-код:

<div id="text">This is <span class="ignore">some</span> short text.</div> 

Когда я использовать мышь и выбрать из «является» «короткий», используя ниже функции, найденной в Интернете,

function getSelectionCharOffsetsWithin(element) { 
    var start = 0, end = 0; 
    var sel, range, priorRange; 
    if (typeof window.getSelection != "undefined") { 
     range = window.getSelection().getRangeAt(0); 
     priorRange = range.cloneRange(); 
     priorRange.selectNodeContents(element); 
     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(element); 
     priorRange.setEndPoint("EndToStart", range); 
     start = priorRange.text.length; 
     end = start + range.text.length; 
    } 
    return { 
     start: start, 
     end: end 
    }; 
} 

Я получу Start Range = 5, End Range = 20. Но я хотел бы расчет расстояния игнорировать <span class="ignore"> так, что я получаю только начать диапазон = 5 и конечный диапазон = 14.

Я дублирую текст на другой фиктивный div перед его обработкой, но кажется, что window.getSelection() получит только оригинал, знает ли какой-либо эксперт, как игнорировать текст внутри <span class="ignore">, чтобы я мог получить точный диапазон?

Answer 1

JSFIDDLE

<div class="content"> 
Vivamus <span>luctus</span> urna sed urna ultricies ac tempor dui sagittis. 
</div> 

$(".content").on("mouseup", function() { 
    var start = window.getSelection().baseOffset; 
    var end = window.getSelection().focusOffset; 
    if (start < end) { 
     var start = window.getSelection().baseOffset; 
     var end = window.getSelection().focusOffset; 
    } else { 
     var start = window.getSelection().focusOffset; 
     var end = window.getSelection().baseOffset; 
    } 
    alert(window.getSelection()); 
    alert(start + ", " + end); 
}); 

Answer 2

У меня есть дизайн решения, пожалуйста http://jsfiddle.net/ghufranne/awc6c9rp/1/

регистрации по прибытию

function calcTextLength(){ 
    alert("d"); 
    var elem = document.getElementsByClassName('p1')[0]; 
    elem.text='sss'; 
    alert(elem); 
var tex = getSelectedTextWithin(elem); 
    elem = document.getElementsByClassName('ignore')[0]; 

    ignoreText = getSelectedTextWithin(elem); 
     alert(tex.length-ignoreText.length); 



} 


function getSelectedTextWithin(el) { 
    var selectedText = ""; 
    if (typeof window.getSelection != "undefined") { 
     var sel = window.getSelection(), rangeCount; 
     if ((rangeCount = sel.rangeCount) > 0) { 
      var range = document.createRange(); 
      for (var i = 0, selRange; i < rangeCount; ++i) { 
       range.selectNodeContents(el); 
       selRange = sel.getRangeAt(i); 
       if (selRange.compareBoundaryPoints(range.START_TO_END, range) == 1 && selRange.compareBoundaryPoints(range.END_TO_START, range) == -1) { 
        if (selRange.compareBoundaryPoints(range.START_TO_START, range) == 1) { 
         range.setStart(selRange.startContainer, selRange.startOffset); 
        } 
        if (selRange.compareBoundaryPoints(range.END_TO_END, range) == -1) { 
         range.setEnd(selRange.endContainer, selRange.endOffset); 
        } 
        selectedText += range.toString(); 
       } 
      } 
     } 
    } else if (typeof document.selection != "undefined" && document.selection.type == "Text") { 
     var selTextRange = document.selection.createRange(); 
     var textRange = selTextRange.duplicate(); 
     textRange.moveToElementText(el); 
     if (selTextRange.compareEndPoints("EndToStart", textRange) == 1 && selTextRange.compareEndPoints("StartToEnd", textRange) == -1) { 
      if (selTextRange.compareEndPoints("StartToStart", textRange) == 1) { 
       textRange.setEndPoint("StartToStart", selTextRange); 
      } 
      if (selTextRange.compareEndPoints("EndToEnd", textRange) == -1) { 
       textRange.setEndPoint("EndToEnd", selTextRange); 
      } 
      selectedText = textRange.text.length; 
     } 
    } 

    return selectedText; 
} 

Answer 3

Если вам нужен только текст (как я), то мое простое решение было скрыть внутренний div перед тем, как получить текст, а затем показать его после. Вот фрагмент того, как он будет работать для начала и конца. Наверное, лучший способ сделать это, но работал на меня.

function getSelectionCharOffsetsWithin(element) { 
 
    var start = 0, 
 
    end = 0; 
 
    var sel, range, priorRange, text; 
 
    $('.ignore').hide(); 
 
    if (typeof window.getSelection != "undefined") { 
 
    sel = window.getSelection(); 
 
    text = sel + ''; 
 
    range = window.getSelection().getRangeAt(0); 
 
    priorRange = range.cloneRange(); 
 
    priorRange.selectNodeContents(element); 
 
    priorRange.setEnd(range.startContainer, range.startOffset); 
 
    start = priorRange.toString().length; 
 
    end = start + (sel + '').length; 
 
    } else if (typeof document.selection != "undefined" && 
 
    (sel = document.selection).type != "Control") { 
 
    text = sel + ''; 
 
    range = sel.createRange(); 
 
    priorRange = document.body.createTextRange(); 
 
    priorRange.moveToElementText(element); 
 
    priorRange.setEndPoint("EndToStart", range); 
 
    start = priorRange.text.length; 
 
    end = start + (sel + '').length; 
 
    } 
 
    $('.ignore').show(); 
 
    return { 
 
    start: start, 
 
    end: end, 
 
    text: text 
 
    }; 
 
} 
 

 
function run() { 
 
    var v = getSelectionCharOffsetsWithin(document.getElementById("text")); 
 
    document.getElementById("res").innerHTML = "start: " + v.start + " end: " + v.end + " text: " + v.text; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<div id="text">This is <span class="ignore">some</span> short text.</div> 
 
Select a piece of text above, then click <button onclick="run();">Run</button> 
 
<div id="res"></div>

редактировать: JQuery селектор опечатка.