JSFiddle - React, Tailwind, and code Playground

by ryanrolds

HTML

<input type="text" id="input" name="input"/>
<div id="content-block">
    <p>lorem ip sum</p>
</div>

CSS

.highlight {background-color:blue}

JavaScript

$('#input').live('keyup', function() {
    $('#input').trigger('highLight');
});

$('#input').bind('highLight', function() {
    var o = {
        words: $('input[name="input"]').val()
    };
    
    highlight("content-block", o);
});

function highlight(id, options) {
    var o = {
            words: 'test',
            caseSensitive: false,
            wordsOnly: true,
            template: '$1<span class="highlight">$2</span>$3'
        },
        pattern;
    
    $.extend(true, o, options || {});

    if (o.words.length == 0) {
        return;
    }
    
    pattern = new RegExp('(.+)?('+ o.words +')(.+)?', (o.caseSensitive ? "" : "i") + "g");

    $('#' + id).each(function() {
        var content = $(this).html();
        
        if (!content) return;
        console.log(content.match(pattern),pattern,content);
            
            
        $(this).html(content.replace(pattern, o.template));
    });
}