Hello , 

Today tutorial we will know  Learn how to highlight words on search using JavaScript. The user enters some text in the search box and hits the search button. All the matches to the entered text are highlighted.




Video Tutorial:

If you would like to learn by coming along to the video tutorial, then check out the video down below. Also, subscribe to My YouTube Channel so you don’t miss any of the exciting tutorials I post regularly.


Folder Structure:

we create folder which name as your wish  and we have three files – index.html  style.css and script.js. These files are the HTML document and the stylesheet.

HTML:

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

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Highlight Searched Text</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet" />
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <div class="container">
        <div class="wrapper">
            <input type="text" id="text-to-search" placeholder="Enter text to search.." />
            <button onclick="search()">Search</button>
        </div>
        <p id="paragraph">
            DevCraw Coding is dedicated to providing you quick and simple yet efficient coding tutorials. We provide best tutorials on HTML, CSS and Javascript. Let's learn, code and grow !
        </p>
    </div>

    <!--Script-->
    <script src="script.js"></script>
</body>

</html>

CSS:

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik", sans-serif;
}

body {
    height: 100%;
    background: linear-gradient(to right, #09183e 50%, #f6f6f6 50%) fixed;
}

.container {
    width: 90vmin;
    background-color: #ffffff;
    padding: 50px 40px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    border-radius: 5px;
    box-shadow: 0 20px 35px rgba(60, 60, 60, 0.2);
}

.wrapper {
    display: flex;
    justify-content: space-between;
}

.wrapper input {
    width: 60%;
    padding: 10px 5px;
    border-radius: 3px;
    border: 1px solid #201d2e;
}

.wrapper button {
    width: 30%;
    background-color: #d42b41;
    border: none;
    outline: none;
    cursor: pointer;
    color: #ffffff;
    border-radius: 3px;
}

.container p {
    line-height: 35px;
    text-align: justify;
    margin-top: 30px;
}

mark {
    background-color: #9aff4d8b;
}

JS:

// Characters to be escaped [.*+?^${}()|[\]\\]

function search(){
    let textToSearch = document.getElementById("text-to-search").value;
    let paragraph = document.getElementById("paragraph");
    textToSearch = textToSearch.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");

    let pattern = new RegExp(`${textToSearch}`,"gi");

    paragraph.innerHTML = paragraph.textContent.replace(pattern, match => `<mark>${match}</mark>`)
}



TAGS:-     highlight search text, highlight searched text, mark search text, highlight text on search,highlight search result javascript, javascript highlight search text,search highlight css javascript, highlight text in string,regular expressions to search text,highlight words on search,highlight text occurences,highlight text on words find javascript,text highlight javascript,highlight match text javascript,highlight search matched javascript,highlight searched terms