JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<script src="http://www.htmldrive.net/edit_media/2011/201102/20110209/search/highlight.js"></script>
<body>
<input type="text" class="span1 disabled" id="field1" name="field1"><br> 
    
<p>
 Vestibulum rhoncus urna sed urna euismod, ut cursus eros molestie. Nulla sed ante ut diam gravida auctor eu quis augue. Donec eget diam malesuada, consectetur orci at, ultrices tellus. Duis id dui vel sem consequat rutrum eget non orci. Nullam sit amet libero odio. Vestibulum sapien sapien, molestie quis porta nec, sodales nec felis. Mauris vehicula, erat eu consectetur viverra, dui tellus laoreet dolor, quis faucibus turpis eros non mi.  
    </p>
</body>

CSS

.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() {
    $('#field1').bind('keyup change', function(ev) {
        // pull in the new value
        var searchTerm = $(this).val();

        // remove any old highlighted terms
        $('body').removeHighlight();

        // disable highlighting if empty
        if ( searchTerm ) {
            var terms = searchTerm.split(/\W+/);
           $.each(terms, function(_, term){
                  // highlight the new term
            term = term.trim();
            if(term != "")
               $('body').highlight(term);
            });                          
          
        }
    });
});