תחומים
    • הרשמה
    • התחברות
    • חיפוש
    • קטגוריות
    • פוסטים אחרונים
    • משתמשים
    • חיפוש
    חוקי הפורום

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

    תכנות
    2
    3
    101
    טוען פוסטים נוספים
    • מהישן לחדש
    • מהחדש לישן
    • הכי הרבה הצבעות
    תגובה
    • הגב כנושא
    התחבר בכדי לפרסם תגובה
    נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
    • ב
      ב.ל נערך לאחרונה על ידי ב.ל

      יש לי רשימת מילים שאני רוצה להדגיש בדף 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>`);
          }
        }
      

      ליצירת קשר - baruchlamdan@gmail.com

      yossiz תגובה 1 תגובה אחרונה תגובה ציטוט 1
      • yossiz
        yossiz @ב.ל נערך לאחרונה על ידי yossiz

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

        📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

        תגובה 1 תגובה אחרונה תגובה ציטוט 3
        • yossiz
          yossiz נערך לאחרונה על ידי yossiz

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

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

          📧 יוסי@מייל.קום | 🌎 בלוג | ☕ קפה

          תגובה 1 תגובה אחרונה תגובה ציטוט 4
          • 1 / 1
          • פוסט ראשון
            פוסט אחרון
          בא תתחבר לדף היומי!