Search bar which highlights text

Question

I want a search bar which searches for the value and highlight that particular value in my web page. I have made a navigation bar in which there is search button with id "btn" and a text box with id "InputVal". I want that my text box value is searched and is highlighted in my webpage (paragraph).

My HTML code:

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Search</title>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"
                    id="inputVal">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="btn">Search</button>
            </form>
        </div>
    </nav>


    <p style="font-size: 25px;" class="mt-5">
        HMS Royal Oak was one of five British Revenge-class battleships built for the Royal Navy during the First World
        War. Launched on 17 November 1914, the ship first saw combat at the Battle of Jutland. On 14 October 1939, she
        was torpedoed by the German submarine U-47 while anchored at Scapa Flow in Orkney, Scotland; 835 were killed
        that night or died later of their wounds. The loss of the outdated ship—the first of the five Royal Navy
        battleships and battlecruisers sunk in the Second World War—did little to affect the numerical superiority
        enjoyed by the British navy and its allies, but the sinking had a considerable effect on wartime morale. Günther
        Prien, the U-boat commander, became the first German submarine officer to be awarded the Knight's Cross of the
        Iron Cross. Demonstrating that the German navy was capable of bringing the war to British home waters, the raid
        resulted in rapid changes to dockland security and the construction of the Churchill Barriers around Scapa Flow.
    </p>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script src="search.js"></script>


</body>

</html>

Output image of my above code

MY JS Code(Jquery):

$(document).ready(function () {
    $('#btn').click( // if someone clicks the button
        function () {
            let bodyTxt = $("p").text() // Takes the paragraph text
            let input = $("#inputVal").val() //Takes the textbox text
            if (bodyTxt.includes(input)) { //checking if my paragraph text includes my search text

                $(bodyTxt).css("background-color", "yellow"); // error in this line. I want to set css properties for my searched text.
            }
            else {
                alert("not found");
            }
        }
    )
});

I am getting an error in my JavaScipt code. I want to set css properties for my searched text (background-color:yellow;).

You are trying to select an html element by its inner text with `$(bodyTxt)`. But you can only select by id or class. Try `$("p:contains('" + input+ "')").css("background-color", "yellow");` — xDrago, Nov 17 '19 at 10:59

score 1 · Answer 1 · answered Aug 02 '20 at 13:07

I actually wanted to comment it but I have so little points, anyways I find this nice JS Fiddle that actually might work well also and it includes divs or containers with Id. Here is the JS code displayed. Click the link for further details like HTML and such.

function highlightSearch() {
var text = document.getElementById("query").value;
var query = new RegExp("(\\b" + text + "\\b)", "gim");
var e = document.getElementById("searchtext").innerHTML;
var enew = e.replace(/(<span>|<\/span>)/igm, "");
document.getElementById("searchtext").innerHTML = enew;
var newe = enew.replace(query, "<span>$1</span>");
document.getElementById("searchtext").innerHTML = newe;

}

xDrago · Answer 2 · 2019-11-17T11:13:14.803

0

You are trying to select an html element by its inner text with $(bodyTxt). You want to find the element which includes the searched text

Try

$("p:contains('" + input + "')").css("background-color", "yellow");

instead of

$(bodyTxt).css("background-color", "yellow");

Your whole code could look like this

$(document).ready(function () {
$('#btn').click( // if someone clicks the button
    function () {
        let input = $("#inputVal").val() //Takes the textbox textmy search text

        $("p:contains('" + input + "')").css("background-color", "yellow");

    }
)

keep in mind that it will Match Case. If you want to find anything that fits to the input no matter ifits lower- or uppercase, you have to use toLowerCase

Here working jsFiddle

edited Nov 17 '19 at 11:13

answered Nov 17 '19 at 11:04

xDrago

1,772
2
20
37

Thanks but that will highlight the whole text as I have only one
tag
– Vasu Nov 17 '19 at 11:23
I want that just my searched text gets highlighted but it will highlight the whole text as I have only one
tag. Can you help me doing that
– Vasu Nov 17 '19 at 11:42
I do not want to select element. I want to just select the searched text – Vasu Nov 17 '19 at 11:52
Check if this helps you: https://stackoverflow.com/questions/31592132/search-for-word-and-highlight-with-jquery – xDrago Nov 17 '19 at 11:54
Just tell me that how can I highlight that particular text which is being searched in my web page. – Vasu Nov 17 '19 at 12:00

Search bar which highlights text

2 Answers2