我有一個 html 標簽
<span>This is first text<span class="ignore">Second</span> This is third text<span>
我正在嘗試從所選文本中獲取開始和結束索引。當我選擇時third，我得到開始和結束索引，34 39
但我期望27 32
我嘗試了以下方法
export const findTextRange = (element) => {
if (!element) return;
let start = 0, end = 0;
let sel, range, priorRange, text;
if (typeof window.getSelection != "undefined") {
sel = window.getSelection();
text = sel '';
if (window.getSelection().rangeCount <= 0) {
return;
}
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;
}
return { start, end, text };
}
有什么方法可以讓我忽略帶有類的span元素。ignore
uj5u.com熱心網友回復：
.ignore存盤初始 HTML，然后洗掉所有具有該類的元素：
const html = element.innerHTML;
element.querySelectorAll('.ignore').forEach((e) => e.remove());
得到范圍后，恢復原來的HTML：
element.innerHTML = html;
片段
顯示代碼片段
const findTextRange = (element) => {
if (!element) return;
const html = element.innerHTML; // store original HTML
element.querySelectorAll('.ignore').forEach((e) => e.remove()); // remove ignore elements
let start = 0, end = 0;
let sel, range, priorRange, text;
if (typeof window.getSelection != "undefined") {
sel = window.getSelection();
text = sel '';
if (window.getSelection().rangeCount <= 0) {
return;
}
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;
}
element.innerHTML = html; // restore HTML
console.log(start, end, text);
return { start, end, text };
}
document.querySelector('#P').addEventListener('click', function() {findTextRange(this)});<span id="P">This is first text<span class="ignore">Second</span> This is third text<span>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/464800.html
標籤：javascript 范围 得到选择
上一篇：如何使滑塊在BS折疊元素中作業？