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

我將得到開始範圍= 5，終止範圍= 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選擇錯字。