Example

by Manu Vashishtha

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="searchContend_h">
        <div class="ui-grid-c">
            <div class="ui-block-a">
                <input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h" />
            </div>
            <div class="ui-block-b">
                <a href="#" class="searchButtonClickText_h">Search</a>
            </div>
            <div class="ui-block-c">
                <a href="#" class="next_h">Next</a>
            </div>
            <div class="ui-block-d">
                <a href="#" class="previous_h">Previous</a>
            </div>
            <div id="realTimeContents">
                aspsnippets.com
                <br />
                aspforums.net
                <br />
                jqueryfaqs.com
                <br />
                w3schools.com
                <br />
                stackoverflow.com
                <br />
            </div>
        </div>
    </div>

CSS

.highlighted
        {
            background-color: yellow;
        }
        .highlight
        {
            background-color: #fff34d;
            -moz-border-radius: 5px; /* FF1+ */
            -webkit-border-radius: 5px; /* Saf3-4 */
            border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
            -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
        }
        .highlight
        {
            padding: 1px 4px;
            margin: 0 -4px;
        }

JavaScript

function searchAndHighlight(searchTerm, selector) {
debugger;
            if (searchTerm) {               
            var selector = selector || "#realTimeContents";
            debugger;
                var searchTermRegEx = new RegExp(searchTerm, "ig");
                var matches = $(selector).text().match(searchTermRegEx);
                if (matches != null && matches.length > 0) {
                    $('.highlighted').removeClass('highlighted'); //Remove old search highlights 
 
                    //Remove the previous matches
                    $span = $('#realTimeContents span');
                    $span.replaceWith($span.html());
 
                    if (searchTerm === "&") {
                        searchTerm = "&amp;";
                        searchTermRegEx = new RegExp(searchTerm, "ig");
                    }
                    $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='match'>" + searchTerm + "</span>"));
                    $('.match:first').addClass('highlighted');
 
                    var i = 0;
 
                    $('.next_h').off('click').on('click', function () {
                        i++;
 
                        if (i >= $('.match').length) i = 0;
 
                        $('.match').removeClass('highlighted');
                        $('.match').eq(i).addClass('highlighted');
                        $('.ui-mobile-viewport').animate({
                            scrollTop: $('.match').eq(i).offset().top
                        }, 300);
                    });
                    $('.previous_h').off('click').on('click', function () {
 
                        i--;
 
                        if (i < 0) i = $('.match').length - 1;
 
                        $('.match').removeClass('highlighted');
                        $('.match').eq(i).addClass('highlighted');
                        $('.ui-mobile-viewport').animate({
                            scrollTop: $('.match').eq(i).offset().top
            ...