Highlight Search Terms

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input id = "search" type ="text" value = "burn">
<div class = "searchable">burn baby Burn</div>

CSS

.highlight{
            font-weight:bold;
            color:green;
}

JavaScript

if ($('#search').val().length !== 0) {

    $('.searchable').each(function() {
    
    		//Handle special characters used in regex
        var searchregexp = new RegExp($("#search").val().replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), "gi");
        
        //$& will maintain uppercase and lowercase characters.
        $(this).html($(this).html().replace(searchregexp, "<span class = 'highlight'>$&</span>"));
        
    });
    
}