IndexSizeError: Failed to execute 'setEnd' on 'Range'

[enolive]

when trying to highlight search hits that occur in child elements of the content and outside I get this error

minimal reproduction content:

<div class="content">
    <p>
        <a href="https://lorem.test">Lorem</a> ipsum dolor sit amet, consectetur adipisicing elit.
        Adipisci tempora, vero. Aliquid debitis dicta earum est
        fugit, hic id iure, libero minima minus modi nesciunt officia velit. Eum, sed, totam.
    </p>
</div>

Now search for "lor" and you will get this error in the browser console

IndexSizeError: Failed to execute 'setEnd' on 'Range': There is no child at offset 3.
    at getRangesForSearchTermInElement (index.js:70:11)
    at index.js:33:24
    at Array.forEach (<anonymous>)
    at index.js:32:60
    at Array.map (<anonymous>)
    at highlightSearchTerm (index.js:31:26)

I looked at the code for a bit and I believe the usage of textContent for looking up which terms to select is the root cause, which will aggregate the whole text content of all child nodes. I think it would be better to look up text nodes manually and operate on their values.

I did not try it out yet, though 😦

[enolive]

there's seem to be an even easier solution to the problem, see my patch. Did I overlook something?

Should I provide a PR?

I could also clean up the range select code a bit 😉

Subject: [PATCH] possible fix for IndexOutOfRange Errors using nested elements
---
Index: src/index.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/index.js b/src/index.js
--- a/src/index.js	(revision 19c91d47d460d0fdae19d0adcb416e4ce311d612)
+++ b/src/index.js	(date 1739386280938)
@@ -32,7 +32,7 @@
     Array.from(elements).map((element) => {
       getTextNodesInElementContainingText(element, search).forEach((node) => {
         ranges.push(
-          ...getRangesForSearchTermInElement(node.parentElement, search)
+          ...getRangesForSearchTermInElement(node, search)
         );
       });
     });
@@ -61,20 +61,13 @@
 const getRangesForSearchTermInElement = (element, search) => {
   const ranges = [];
   const lowerCaseSearch = search.toLowerCase();
-  if (element.childNodes.length === 0) return ranges;
-  // In some frameworks like React, when combining static text with dynamic text, the element may have multiple Text child nodes.
-  // To avoid errors, we must find the child node that actually contains the search term.
-  const childWithSearchTerm = Array.from(element.childNodes).find((node) =>
-    node.textContent?.toLowerCase().includes(lowerCaseSearch)
-  );
-  if (!childWithSearchTerm) return ranges;
-  const text = childWithSearchTerm.textContent?.toLowerCase() || "";
+  const text = element.textContent?.toLowerCase() || "";
   let start = 0;
   let index;
   while ((index = text.indexOf(lowerCaseSearch, start)) >= 0) {
     const range = new Range();
-    range.setStart(childWithSearchTerm, index);
-    range.setEnd(childWithSearchTerm, index + search.length);
+    range.setStart(element, index);
+    range.setEnd(element, index + search.length);
     ranges.push(range);
     start = index + search.length;
   }