דף html עם חיפוש טקסט (עם רגקס)

pcinfogmach

<!DOCTYPE html>
<html lang="auto">
<head>
    <meta charset="UTF-8">
    <title>Search Highlight Page</title>
    <style>
        body {margin:0;}
        .highlight {
            background-color: yellow;
        }
        .selected-highlight {
            background-color: orange;
        }
    </style>
</head>
<body dir='rtl'>
    <div id="searchContainer" style="position: fixed; top: 0; margin:0; padding: 5px; width: 100%; background-color:whitesmoke;">
        <input type="text" id="searchBar" placeholder="הזן טקסט לחיפוש" style="border: none; padding:5px;" onkeydown="handleEnter(event)">
        <button id="searchButton" style="border: none; padding:5px;" onclick="searchNext()">חפש</button>
        <button id="previousButton" style="border: none; padding:5px;" onclick="searchPrevious()">הקודם</button>
        <label><input type="checkbox" id="regexCheckbox"> חיפוש בעזרת Regex</label>
    </div>

    <div id="content" style="padding-top: 25px; margin:5px;">
        <!-- Example content to search through -->
        <p>וידאו מספק דרך רבת-עוצמה שתעזור לך להוכיח את הנקודה שלך. בעת הלחיצה על 'וידאו מקוון', באפשרותך להדביק את הקוד המוטבע של הווידאו שברצונך להוסיף. ניתן גם להקליד מילת מפתח כדי לחפש באופן מקוון אחר וידאו שיתאים בצורה הטובה ביותר למסמך שלך.</p>
        <p>כדי להעניק למסמך שלך מראה מקצועי, Word מספק עיצובים של כותרת עליונה, כותרת תחתונה, עמוד שער ותיבת טקסט אשר משלימים זה את זה. לדוגמה, באפשרותך להוסיף עמוד שער, כותרת עליונה וסרגל צידי תואמים. לחץ על 'הוסף' ולאחר מכן בחר את הרכיבים הרצויים מהגלריות השונות.</p>
        <p>ערכות נושא וסגנונות גם שומרים על התיאום של המסמך שלך. בעת הלחיצה על 'עיצוב' ובחירת ערכת נושא חדשה, התמונות, התרשימים וגרפיקת SmartArt משתנים בהתאם לערכת הנושא החדשה שלך. בעת החלת סגנונות, הכותרות משתנות בהתאם לערכת הנושא החדשה.</p>
        <p>חסוך זמן בעבודה ב- Word בעזרת לחצנים חדשים המופיעים במקומות הנכונים. כדי לשנות את אופן ההתאמה של תמונה למסמך, לחץ עליה ולצידה יופיע לחצן של אפשרויות פריסה. בעת העבודה על טבלה כלשהי, לחץ במקום שבו ברצונך להוסיף שורה או עמודה, ולאחר מכן לחץ על סימן החיבור.</p>
        <p>כמו כן, קל יותר לקרוא בתצוגת הקריאה החדשה. באפשרותך לכווץ חלקים של המסמך ולהתמקד בטקסט הרצוי. אם עליך להפסיק לקרוא לפני שאתה מגיע לסוף המסמך, Word זוכר את המקום שאליו הגעת - אפילו בהתקן אחר.</p>
    </div>

    <script>
        let currentIndex = 0;
        let previousSearchTerm = "";
        let direction = 'next';

        function removeHighlights() {
            const highlights = document.querySelectorAll('.highlight, .selected-highlight');
            highlights.forEach(highlight => {
                const parent = highlight.parentNode;
                while (highlight.firstChild) {
                    parent.insertBefore(highlight.firstChild, highlight);
                }
                parent.removeChild(highlight);
            });
        }

        function highlightSearchTerm(searchTerm, useRegex) {
            const regex = useRegex ? new RegExp(`(${searchTerm})`, 'gi') : new RegExp(`(${searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
            const content = document.getElementById('content');
            content.innerHTML = content.innerHTML.replace(regex, '<span class="highlight">$1</span>');
        }

        function searchAndHighlight() {
            const searchTerm = document.getElementById('searchBar').value;
            const useRegex = document.getElementById('regexCheckbox').checked;
            removeHighlights();
            if (searchTerm) {
                highlightSearchTerm(searchTerm, useRegex);
                const highlightedElements = document.querySelectorAll('.highlight');
                if (highlightedElements.length) {
                    if (searchTerm === previousSearchTerm && direction === 'next') {
                        currentIndex++;
                        if (currentIndex >= highlightedElements.length) {
                            currentIndex = 0;
                        }
                    } else if (searchTerm === previousSearchTerm && direction === 'previous') {
                        currentIndex--;
                        if (currentIndex < 0) {
                            currentIndex = highlightedElements.length - 1;
                        }
                    } else {
                        currentIndex = 0;
                    }

                    highlightedElements.forEach(element => element.classList.remove('selected-highlight'));
                    highlightedElements[currentIndex].classList.add('selected-highlight');
                    highlightedElements[currentIndex].scrollIntoView({ block: "center" });
                }
            } else {
                alert('Please enter a search term.');
            }
            previousSearchTerm = searchTerm;
        }

        function searchPrevious() {
            direction = 'previous';
            searchAndHighlight();
        }

        function searchNext() {
            direction = 'next';
            searchAndHighlight();
        }

        function handleEnter(event) {
            if (event.key === 'Enter') {
                event.preventDefault(); // Prevent default Enter key behavior (like form submission)
                searchNext();
            }
        }
    </script>
</body>
</html>

תחומים - פורום חרדי מקצועי

דף html עם חיפוש טקסט (עם רגקס)