Highlight prefix

by mmarcon

HTML

<form>
    <input type="text" id="prefix" value="l"/>
    <input type="button" id="search" value="search"/>
</form>
<div id="content">
    <h1>Lorem ipsum dolor</h1>
    <p>(Lorem ipsum dolor sit amet), consectetur adipiscing elit. Pellentesque eget eros quis est pharetra imperdiet. Aliquam tempor facilisis felis vel laoreet. Quisque egestas porta ullamcorper. Nullam porta pretium elementum. Curabitur sollicitudin lacinia tempor. Nullam ut turpis non urna consectetur pulvinar. Fusce sed nulla vitae ligula dictum vestibulum. Maecenas nunc arcu, tempor ac ullamcorper at, interdum sit amet nulla. Suspendisse lobortis posuere justo, in iaculis lorem lobortis sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget nunc quis purus molestie viverra non ut massa. (Suspendisse in sapien a purus ullamcorper pretium).
</p> 
<p> 
Vivamus pulvinar, sem vitae iaculis venenatis, nibh augue venenatis augue, convallis auctor ante lectus tincidunt quam. Donec laoreet ultricies purus ut ultrices. Aliquam dui libero, lacinia vitae tempor at, hendrerit a tellus. Praesent vitae feugiat augue. In ac tellus risus, eu lacinia diam. Donec ac adipiscing purus. Integer ut nisl at purus varius lacinia. Mauris sed lorem at massa imperdiet ultricies sed vel lorem. Donec odio nisi, commodo semper consequat a, tincidunt eu nisl. Sed felis risus, tempor a tincidunt at, gravida sed mauris. Aliquam erat volutpat. Cras tincidunt ante turpis. Quisque consequat lacinia risus at pretium. Praesent ut nulla urna, in pellentesque magna. Etiam lacinia elit in velit scelerisque mattis.
</p> 
<p> 
Nullam orci ante, venenatis at mattis vitae, elementum at tortor. Suspendisse placerat gravida pulvinar. Integer nibh erat, suscipit quis iaculis in, faucibus sit amet magna. Sed tempor eleifend enim a ultricies. Nullam nec erat a augue pellentesque pretium. Nunc aliquam laoreet molestie. Nunc interdum orci nec ipsum placerat suscipit. Pellentesque interdum...

CSS

@import url(http://fonts.googleapis.com/css?family=Quattrocento);

body {
    font-family: 'Quattrocento', arial, serif;
}

p {
    margin-bottom: 10px;
}

h1 {
    font-size: 32px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
}

strong {
    font-weight: bold;
}

form {
    background-color: #eee;
    text-align: center;
    padding: 10px;
    margin-bottom: 20px;
}

#prefix {
    border: 0;
    border-bottom: 1px dotted #333;
    padding: 3px;
    font-family: 'Quattrocento', arial, serif;
    font-size: 16px;
    background-color: transparent;
}

#search {
    border: 1px solid #ccc;
    background-color: #666;
    color: #fff;
    font-family: 'Quattrocento', arial, serif;
    border-radius: 3px;
    padding: 3px;
    font-size: 16px;
}

JavaScript

$(function() {
    String.prototype.beginsWith = function(prefix) {
        var regExp = new RegExp('^' + prefix, 'gi');
        return (regExp.test(this));
    }
    $('#search').click(function() {
        $('#content p').each(function() {
            var text = $(this).text().split(' ');
            for (var i in text) {
                var buffer = '';
                if (text[i].indexOf('(') === 0) {
                    buffer += '(';
                    text[i] = text[i].substring(1);
                }
                if (text[i].beginsWith($('#prefix').val())) {
                    text[i] = buffer + '<strong>' + text[i] + '</strong>';
                }
                else {
                    text[i] = buffer + text[i];
                }
            }
            $(this).html(text.join(' '));
        });
    });
});