<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">
            He ordered his regular breakfast. Two eggs sunnyside up, hash browns, and two strips of bacon. He continued to look at the menu wondering if this would be the day he added something new. This was also part of the routine. A few seconds of hesitation to see if something else would be added to the order before demuring and saying that would be all. It was the same exact meal that he had ordered every day for the past two years.
        </p>
    </div>


    <!--Script-->
    <script src="script.js"></script>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Rubik",sans-serif;
}
body{
    height: 100%;
    background: linear-gradient(
        to right,
        #201d2e 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: #201d2e;
    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: #ffdd4b;
}
// 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>`)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.