html code: search box to find texts on the pages

<html>
<head>
<title>html code: search box to find texts on the pages</title>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    .search-container {
        margin: 20px;
    }
    input[type="text"] {
        padding: 8px;
        width: 200px;
    }
    button {
        padding: 8px 15px;
        background-color: #007bff;
        color: white;
        border: none;
        cursor: pointer;
    }
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>
<div class="search-container">
    <input type="text" id="searchInput" placeholder="Search...">
    <button onclick="searchText()">Search</button>
</div>
<div id="searchResults"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida in ipsum non eleifend. Nam ut commodo libero, pulvinar finibus justo. Ut in fermentum nulla. Aliquam tincidunt finibus porta. Proin volutpat lacinia felis vitae sollicitudin. Proin id nisi est. Integer bibendum erat ut velit auctor commodo. Curabitur eu eros non massa finibus consectetur in sed justo. Maecenas tincidunt elit vel enim porta, vitae tincidunt erat vestibulum. Ut ac orci ac lorem ultricies tempus eget a neque. Pellentesque dui nunc, commodo eu convallis a, malesuada vel est. Nam in lectus ac sapien gravida sagittis.</p>
<script>
    function searchText() {
        var searchText = document.getElementById('searchInput').value;
        var searchResults = document.getElementById('searchResults');
        var bodyText = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);

var searchExp = new RegExp(searchText, 'gi');
        var matches = 0;

while (bodyText.nextNode()) {
            var node = bodyText.currentNode;
            if (searchExp.test(node.nodeValue)) {
                var newNode = document.createElement('span');
                newNode.innerHTML = node.nodeValue.replace(searchExp, match => `<span class="highlight">${match}</span>`);
                node.parentNode.replaceChild(newNode, node);
                matches++;
            }
        }

if (matches > 0) {
            searchResults.innerHTML = 'Found ' + matches + ' matches for "' + searchText + '"';
        } else {
            searchResults.innerHTML = 'No matches found for "' + searchText + '"';
        }
    }
</script>
</body>
</html>

html code: search box to find texts on the pages

You may like these posts :

Write Your Comment