איך לסמן מילים מסוימות בדף html ?

[ב.ל]

יש לי רשימת מילים שאני רוצה להדגיש בדף html
אני מחפש איך הדרך הכי קלה בj.s לחפש את אותם מילים ולעטוף אותם בspan עם class כדי להדגיש את אותם מילים
המילים יכולים להיות מפוזרים בכל הדף ובתוך סוגי אלמנטים שונים.

כתבתי בצורה דלהלן אך עדיין לפעמים שובר את הדף וגם עובד באופן איטי (ובמיוחד שעובר שוב על אלמנטים מקוננים)

 const wordsList = ['מילה1','מילה2','מילה3']
  const elements = document.body.querySelectorAll('*:not(script)');
  for (const element of elements) {
    for (const word of wordsList) {
      element.innerHTML = element.innerHTML.replaceAll(word, `<span class="mark">${word}</span>`);
    }
  }

[yossiz]

@ב-ל
https://stackoverflow.com/a/34614703/8997905
(בקצרה: הוא טוען שזו מסוג הבעיות הלא טריוויאליות שעדיף להשתמש בספרייה אם אתה לא בקטע של להשקיע יותר מדי מאמצים להגיע לפתרון נכון, הספרייה שהוא מציע: https://markjs.io)

[yossiz]

אני לא משוכנע שהתשובה הנ"ל נכונה.
אולי עדיף לגנוב/לכתוב מימוש פשוט ולהטמיע בקוד שלך במקום לייבא ספרייה יחסית גדולה.
ניסיתי להבין מה לא טוב בקוד שלך ולנסות לתקן את זה.
בקוד שלך יש כמה בעיות להבנתי:
א) אתה עושה את ההחלפה על אלמנטיים חיצוניים ושוב חוזר על זה על אלמנטים פנימיים שזה מיותר
ב) ברגע שאתה מחליף את ה-innerHTML של האלמנט הכי חיצוני, אז כל שאר האלמנטים ברשימה כבר לא מחוברים ל-DOM. אז זה מיותר++
ג) החלפה על ידי innerHTML מייצר מחדש את ה-DOM, זה מבטל האזנות לאירועים וכדומה. ברור שזה ישבור את האינטראקטיביות של הדף.
איך אפשר לפתור את זה?
במקום להחליף את כל ה-innerHTML של כל הדף, שזה בעצם בונה מחדש את הדף, נשתמש בפונצקיה שחותכת חור מיזערי ב-DOM בניתוח מדוייק ונשתיל לשם את ה-span שלנו.
שלב א:
נעבור על ה-DOM ונמצא את ה-textNode שכוללת את מילת המפתח שלנו
שלב ב:
נשתמש ב-API זה כדי לחלק את ה-node ל-3 חלקים. 1) עד המילה 2) המילה 3) אחרי המילה
שלב ג:
נוציא את חלק מס' 2 הנ"ל ונחליף אותו ב-span שמכיל את המילה.

(רציתי לכתוב קוד שמממש את זה אבל התייאשתי לבינתיים)