[英]window.getSelection() ignore certain tags
以下是我的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">
內部的文本,因此我可以獲取准確的范圍?
<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);
});
我已經設計了解決方案,請檢查-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;
}
如果只需要文本(就像我一樣),那么我的簡單解決方案是在獲取文本之前隱藏內部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選擇器錯字。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.