בירור | הוספת שורת חיפוש פנימית בתוך מסמך html

[אלישי]

@צצצצצ חיפוש בתוך מסמך מבצעים עם קוד ג'אווה-סקריפט ולא ע"י הוספת תגית ומאפיין HTML בלבד, ה-HTML היא רק מעטפת.
את פקודת החיפוש ב-JS תוכל לעשות או עם ביטויים רגולריים או עם דרכים יותר מקוריות ומעניינות כמו indexOf (כשהתוצאה היא לא 1-) או ע"י לולאות find ו-filter.

[צצצצצ]

@אלישי כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

@צצצצצ חיפוש בתוך מסמך מבצעים עם קוד ג'אווה-סקריפט ולא ע"י הוספת תגית ומאפיין HTML בלבד, ה-HTML היא רק מעטפת.
את פקודת החיפוש ב-JS תוכל לעשות או עם ביטויים רגולריים או עם דרכים יותר מקוריות ומעניינות כמו indexOf (כשהתוצאה היא לא 1-) או ע"י לולאות find ו-filter.

תכלס, יש אפשרות לעשות כזה דבר? ואם כן, איך?
תודה רבה

[לא-מתייאש]

@צצצצצ כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

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

אם הבנתי טוב, זה אמור להיות משהו כזה, אין לי זמן לעשות משהו יותר משודרג, אבל זה ייתן לך דרך נראה לי

<input type="text" id="word" placeholder="Enter the word to search">
<button onclick="searchWord()">Search</button>

<script>
function searchWord() {
  var word = document.getElementById("word").value;
  var found = window.find(word);

  if (found) {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var selectionNode = document.createElement("span");
    selectionNode.style.fontWeight = "bold";
    selectionNode.appendChild(range.extractContents());
    range.insertNode(selectionNode);

    while (window.find(word)) {
      selection = window.getSelection();
      range = selection.getRangeAt(0);
      selectionNode = document.createElement("span");
      selectionNode.style.fontWeight = "bold";
      selectionNode.appendChild(range.extractContents());
      range.insertNode(selectionNode);
    }
  } else {
    alert("The word \"" + word + "\" was not found.");
  }
}
</script>

[צצצצצ]

@לא-מתייאש כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

@צצצצצ כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

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

אם הבנתי טוב, זה אמור להיות משהו כזה, אין לי זמן לעשות משהו יותר משודרג, אבל זה ייתן לך דרך נראה לי

<input type="text" id="word" placeholder="Enter the word to search">
<button onclick="searchWord()">Search</button>

<script>
function searchWord() {
  var word = document.getElementById("word").value;
  var found = window.find(word);

  if (found) {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var selectionNode = document.createElement("span");
    selectionNode.style.fontWeight = "bold";
    selectionNode.appendChild(range.extractContents());
    range.insertNode(selectionNode);

    while (window.find(word)) {
      selection = window.getSelection();
      range = selection.getRangeAt(0);
      selectionNode = document.createElement("span");
      selectionNode.style.fontWeight = "bold";
      selectionNode.appendChild(range.extractContents());
      range.insertNode(selectionNode);
    }
  } else {
    alert("The word \"" + word + "\" was not found.");
  }
}
</script>

אני מעתיק את כל זה לתוך מסמך קיים?

[לא-מתייאש]

@צצצצצ כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

@לא-מתייאש כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

@צצצצצ כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

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

אם הבנתי טוב, זה אמור להיות משהו כזה, אין לי זמן לעשות משהו יותר משודרג, אבל זה ייתן לך דרך נראה לי

<input type="text" id="word" placeholder="Enter the word to search">
<button onclick="searchWord()">Search</button>

<script>
function searchWord() {
  var word = document.getElementById("word").value;
  var found = window.find(word);

  if (found) {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var selectionNode = document.createElement("span");
    selectionNode.style.fontWeight = "bold";
    selectionNode.appendChild(range.extractContents());
    range.insertNode(selectionNode);

    while (window.find(word)) {
      selection = window.getSelection();
      range = selection.getRangeAt(0);
      selectionNode = document.createElement("span");
      selectionNode.style.fontWeight = "bold";
      selectionNode.appendChild(range.extractContents());
      range.insertNode(selectionNode);
    }
  } else {
    alert("The word \"" + word + "\" was not found.");
  }
}
</script>

אני מעתיק את כל זה לתוך מסמך קיים?

אם זה דף HTML, זה אמור לעבוד נראה לי

[צצצצצ]

@אלישי @לא-מתייאש לא עובד. הוא לא נותן למלאות את המשבצת בטקסט
עריכה: מיקמתי אותו באופן שונה וזה עובד. ייש"כ!!

[לא-מתייאש]

@צצצצצ כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

@אלישי @לא-מתייאש לא עובד. הוא לא נותן למלאות את המשבצת בטקסט

לי זה עובד, ניסיתי משהו פשוט כזה והוא מדגיש לי את המילים

<html>
<input type="text" id="word" placeholder="Enter the word to search">
<button onclick="searchWord()">Search</button>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tristique tempus nibh id sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis risus ac viverra egestas. Duis rutrum nisl lectus, eget vestibulum mi commodo nec. Fusce non tortor magna. Nam non ligula aliquet, ornare libero quis, sodales dui. Nam pulvinar mauris elit, fringilla finibus nisl porta a. Phasellus lobortis ex vitae nunc aliquam, et pellentesque leo finibus. Vivamus a justo eleifend, laoreet lectus ut, lacinia ex. Aliquam finibus viverra urna condimentum laoreet. Vivamus eu semper nunc, consequat congue neque. Integer urna lorem, suscipit eget lorem a, interdum pulvinar velit. Curabitur pulvinar turpis vitae luctus accumsan.</div>


<script>
function searchWord() {
  var word = document.getElementById("word").value;
  var found = window.find(word);

  if (found) {
    var selection = window.getSelection();
    var range = selection.getRangeAt(0);
    var selectionNode = document.createElement("span");
    selectionNode.style.fontWeight = "bold";
    selectionNode.appendChild(range.extractContents());
    range.insertNode(selectionNode);

    while (window.find(word)) {
      selection = window.getSelection();
      range = selection.getRangeAt(0);
      selectionNode = document.createElement("span");
      selectionNode.style.fontWeight = "bold";
      selectionNode.appendChild(range.extractContents());
      range.insertNode(selectionNode);
    }
  } else {
    alert("The word \"" + word + "\" was not found.");
  }
}
</script>
</html>

[NH.LOCAL]

@צצצצצ ממליץ לך מאוד להיעזר בצ'אט GPT, בין בבנייה של חיפוש עם JS, ובין בעיצוב החיפוש והמסתעף בקוד ה-HTML וה-CSS

Spoiler

תוכל לעיין באתר שבחתימה שלי שבנוי מתחילתו ועד סופו בעזרתו של צ'אט GPT

[צצצצצ]

@NH-LOCAL כתב בבירור | הוספת שורת חיפוש פנימית בתוך מסמך html:

@צצצצצ ממליץ לך מאוד להיעזר בצ'אט GPT, בין בבנייה של חיפוש עם JS, ובין בעיצוב החיפוש והמסתעף בקוד ה-HTML וה-CSS

Spoiler

תוכל לעיין באתר שבחתימה שלי שבנוי מתחילתו ועד סופו בעזרתו של צ'אט GPT

אין לי אפשרות, תוכל לעשות בשבילי?
עריכה: תודה, בסוף הצלחתי בעזרתו של @לא-מתייאש .

[NH.LOCAL]

@צצצצצ למה לא? זה פתוח גם בנטפרי

[צצצצצ]

פוסט זה נמחק!

[שלום עולם]

@צצצצצ רובי הבוט גם טוב.
אם כי הקוד של @לא-מתייאש מצויין.