Tengo una etiqueta html que es
<span>This is first text<span class="ignore">Second</span> This is third text<span> Estoy tratando de obtener el índice de inicio y final del texto seleccionado. Cuando selecciono el third , obtengo un índice de inicio y finalización como 34 39 Pero espero 27 32
Intenté el siguiente enfoque
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 }; } ¿Hay alguna forma en la que pueda ignorar el elemento span con ignore la clase?
Guarde el HTML inicial, luego elimine todos los elementos que tengan la clase .ignore :
const html = element.innerHTML; element.querySelectorAll('.ignore').forEach((e) => e.remove());Después de obtener el rango, restaure el HTML original:
element.innerHTML = html;Retazo
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>