Breaking News: Grepper is joining You.com. Read the official announcement!

Search wordt in Web page

Tired Turtle answered on January 20, 2024 Popularity 6/10 Helpfulness 1/10

answer Search wordt in Web page

Search wordt in Web page

Comment

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Recherche et surlignage</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <form class="d-flex">
        <button class="btn btn-primary hauteur" type="button" id="searchButton">Search</button>
        <label>
            <input class="form-control me-2 hauteur" type="text" placeholder="Search" id="searchInput"/>
        </label>
    </form>

    <script>
        document.getElementById('searchButton').addEventListener('click', function () {
            var searchInput = document.getElementById('searchInput').value;
            var highlightText = function(node) {
                if (node.nodeType === Node.TEXT_NODE) {
                    var text = node.textContent;
                    var lowerText = text.toLowerCase();
                    var lowerSearchInput = searchInput.toLowerCase();
                    var index = lowerText.indexOf(lowerSearchInput);

                    if (index !== -1) {
                        var span = document.createElement('span');
                        span.className = 'highlight';
                        var matchedText = node.splitText(index);
                        matchedText.splitText(searchInput.length);
                        var highlighted = matchedText.cloneNode(true);
                        span.appendChild(highlighted);
                        matchedText.parentNode.replaceChild(span, matchedText);
                    }
                } else if (node.nodeType === Node.ELEMENT_NODE && node.nodeName !== 'SCRIPT') {
                    for (var i = 0; i < node.childNodes.length; i++) {
                        highlightText(node.childNodes[i]);
                    }
                }
            };

            highlightText(document.body);
        });
    </script>
</body>
</html>

Popularity 6/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: html search web

Link to this answer
Share Copy Link

Contributed on Jan 20 2024

Tired Turtle

0 Answers Avg Quality 2/10

Search wordt in Web page

Contents

More Related Answers

Search wordt in Web page

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.