Hightlight ALL

Caesar1010

Hello,

I am working with a peice of Javascript I found online. This code will search, find and highlight the text when it is found. The problem is, you have to keep clicking SEARCH to find all of the text. I am fairly new to Javascript and can't figure out what I need to add (or remove) from this script to get it to search, highlight and find ALL of the matching text on the page.

Any help would be great.
Thanks!
CODE:

<!--BEGIN SEARCH BOX -->

<div class="search_box">
    <form action="" id="form2">
        <div>
            <input type="text" id="search">
            <input type="button" id="submit_form" onclick="checkInput()" value="Submit">
        </div>
    </form>
</div>

<!--END SEARCH BOX -->
<script>
    function checkInput() {
        var query = document.getElementById('search').value;
        window.find(query);
        return true;
    }
</script>

NogDog

I added [code]...[/code] tags around your code block to aid readability here. Please be sure to use them going forward here. 😉

Sempervivum

I implemented a search feature some time ago and modified it. Now it highlights all of the text at once. Check if it meets your requirement.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Search Document</title>
    <style>
        .found {
            background-color: lightblue !important;
        }
    </style>

</head>

<body>
    <label id="search-lbl" for="search-input">Search</label>
    <input id="search-input">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
    magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
    elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero
    eos et
    accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
    sit
    amet. <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore
        et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita
        kasd
        gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

    <div>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat
        nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit
        augue
        duis
        dolore te feugait nulla facilisi. <div>Lorem ipsum dolor sit amet</div>, consectetuer adipiscing elit, sed diam
        nonummy nibh
        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>

    <script>
        document.getElementById('search-lbl').addEventListener('click', searchIt);
        function undoSearch(cls) {
            // Ueber alle Fundstellen:
            document.querySelectorAll('span.' + cls).forEach(item => {
                // Elternelement ermitteln
                const parent = item.parentNode;
                // Textknoten mit Text des Elternelementes erzeugen
                const newTxtNode = document.createTextNode(parent.textContent);
                // ... und Elternelement damit ersetzen
                parent.replaceWith(newTxtNode);
                // Jetzt hat der Knoten wieder der ursprünglichen Zustand
            });
        }
        function search(node, needle, cls) {
            const regex = new RegExp('(' + needle + ')', 'ig');
            node.childNodes.forEach(node => {
                switch (node.nodeType) {
                    // Handelt es sich um einen Elementknoten?
                    case 1:
                        // Suche fortsetzen
                        search(node, needle, cls);
                        break;
                    // Handelt es sich um einen Textknoten?
                    case 3:
                        // Den Text heraus ziehen
                        const txt = node.textContent.trim();
                        // console.log(txt)
                        if (txt != '' && txt.includes(needle)) {
                            // Um den gefundenen Text hervor zu heben, betten wir ihn ein
                            // span-Element ein, das wir dann geeignet mit CSS gestalten koennen.
                            // In einem Textknoten wird jedoch kein HTML interpretiert.
                            // Daher erzeugen wir ein neues span-Element und tragen dort den
                            // geaenderten Text ein.
                            let newEle = document.createElement('span');
                            newEle.innerHTML = txt.replace(regex, '<span class="' + cls + '">$1</span>')
                            node.replaceWith(newEle);
                            break;
                        }
                }
            });
        }
        let lastSearchStr = '',
            foundElems,
            idxSearch = 0;
        // Die folgende Funktion wird durch das Suchformular aufgerufen
        // und startet die Suche
        function searchIt(event) {
            const
                idInput = event.target.getAttribute('for'),
                needle = document.getElementById(idInput).value;
            // event.preventDefault();
            // Unterscheidet sich der Suchstring vom gespeicherten?
            // D. h. handelt es sich um eine neue Suche?
            if (needle != lastSearchStr) {
                lastSearchStr = needle;
                idxSearch = 0;
                // Aenderungen am DOM von der vorigen Suche rueckgaengig machen
                undoSearch('found');
                // Suche starten
                search(document.querySelector('body'), needle, 'found');
                // Gefundene Element bereit stellen
                foundElems = document.querySelectorAll('.found');
                searchDone = true;
            }
            return false;
        }

    </script>
</body>

</html>

Unfortunately I coded this for a user in a german forum and therefore the remarks are german. Please ask if you don't understand how the code works. If required I would translate them to english.

Caesar1010

Sempervivum Thank you - But the search should be able to go through the entire page, not just what is within the "search-input" ID.

Appreciate you taking the time to reply!

Sempervivum

the search should be able to go through the entire page, not just what is within the "search-input" ID.

For me it does. I takes the value from the input and highlights every occurrence in the document.
Which browser are you using?

Caesar1010

Using FireFox v94.0.2

Thanks.

Sempervivum

I tried firefox and it works fine. After searching the screen looks like this:

Caesar1010

Using FireFox v94.0.2

I should be able to take your code and remove the "orem ipsum dolor sit amet... " section which just leaves me with the

<label id="search-lbl" for="search-input">Search</label>
<input id="search-input">
<script>
document.getElementById('search-lbl').addEventListener('click', searchIt);
function undoSearch(cls) {
// Ueber alle Fundstellen:
document.querySelectorAll('span.' + cls).forEach(item => {
// Elternelement ermitteln
const parent = item.parentNode;
// Textknoten mit Text des Elternelementes erzeugen
const newTxtNode = document.createTextNode(parent.textContent);
// ... und Elternelement damit ersetzen
parent.replaceWith(newTxtNode);
// Jetzt hat der Knoten wieder der ursprünglichen Zustand
});
}
function search(node, needle, cls) {
const regex = new RegExp('(' + needle + ')', 'ig');
node.childNodes.forEach(node => {
switch (node.nodeType) {
// Handelt es sich um einen Elementknoten?
case 1:
// Suche fortsetzen
search(node, needle, cls);
break;
// Handelt es sich um einen Textknoten?
case 3:
// Den Text heraus ziehen
const txt = node.textContent.trim();
// console.log(txt)
if (txt != '' && txt.includes(needle)) {
// Um den gefundenen Text hervor zu heben, betten wir ihn ein
// span-Element ein, das wir dann geeignet mit CSS gestalten koennen.
// In einem Textknoten wird jedoch kein HTML interpretiert.
// Daher erzeugen wir ein neues span-Element und tragen dort den
// geaenderten Text ein.
let newEle = document.createElement('span');
newEle.innerHTML = txt.replace(regex, '<span class="' + cls + '">$1</span>')
node.replaceWith(newEle);
break;
}
}
});
}
let lastSearchStr = '',
foundElems,
idxSearch = 0;
// Die folgende Funktion wird durch das Suchformular aufgerufen
// und startet die Suche
function searchIt(event) {
const
idInput = event.target.getAttribute('for'),
needle = document.getElementById(idInput).value;
// event.preventDefault();
// Unterscheidet sich der Suchstring vom gespeicherten?
// D. h. handelt es sich um eine neue Suche?
if (needle != lastSearchStr) {
lastSearchStr = needle;
idxSearch = 0;
// Aenderungen am DOM von der vorigen Suche rueckgaengig machen
undoSearch('found');
// Suche starten
search(document.querySelector('body'), needle, 'found');
// Gefundene Element bereit stellen
foundElems = document.querySelectorAll('.found');
searchDone = true;
}
return false;
}

</script>

</body>

</html>

Is that correct?

Thanks.

Sempervivum

Yes, replace the lorem-ipsum-content by your own one.

Caesar1010

Sempervivum Thank you.

Sempervivum

BTW: You used triple backticks two time at the beginning and the end of your code:

</html>
```
```

Just use only one set and the formatting will be correct:

</html>
```