Search with highlight

by Luke

HTML

<input id="toSearch" />
<button id="searchButton">Search</button><br />
<div id="content" contenteditable="true">
<!-- Editable like a textarea, but without some of its default styles and functions -->

    This is the text in which to highlight letters. Try it with a "lorem ipsum" text:
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis lectus quis massa bibendum, sed volutpat leo molestie. Vivamus porta feugiat mauris in faucibus. Pellentesque sollicitudin nec est vitae venenatis. Aliquam ultrices posuere leo, ut vestibulum odio gravida vel. Aenean scelerisque ac nisi pretium eleifend. Phasellus nisl diam, hendrerit porta molestie at, sodales id diam. In commodo sed augue eget viverra.

Nullam viverra ac purus sed bibendum. Sed ligula nibh, tristique eu dictum id, vulputate non eros. Donec posuere nec sapien a tristique. Aenean sed est urna. Mauris mi dolor, congue sed tristique sed, vulputate at tortor. Nam quis quam sollicitudin, aliquam eros ullamcorper, interdum ligula. Morbi volutpat, quam quis tincidunt mattis, nisl tortor aliquet nulla, sit amet porttitor risus velit ut libero. Pellentesque finibus rutrum lorem in tempus. Praesent vitae ipsum eu magna blandit iaculis. Etiam vel metus metus. Aliquam non tortor id arcu finibus vestibulum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla sagittis, lectus ut luctus varius, libero erat iaculis orci, vel consequat turpis neque sit amet erat. In hac habitasse platea dictumst. Phasellus condimentum rutrum odio vulputate suscipit.

Morbi in ligula sit amet eros molestie vehicula. Pellentesque tempor rhoncus velit at venenatis. Nulla et magna eu ex fringilla dictum id ac erat. Integer pretium elementum porta. Sed semper ac diam laoreet scelerisque. Sed consequat varius velit vel lacinia. Pellentesque pharetra aliquam egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque id convallis mauris. Ut...

CSS

div {
    /* styles to make <div> look more like a <textarea> */
    width: 400px;
    height: 200px;
    border-radius: 3px;
    border: 1px solid lightgrey;
    padding: 5px;
}

JavaScript

$("#searchButton").click(function() {
    var toSearch = new RegExp($("#toSearch").val(), 'gi');
    var divContent = $("#content").text();
    divContent = divContent.replace(toSearch, "<span style='background-color: yellow'>" + $("#toSearch").val() + "</span>");
    $("#content").html(divContent);
});

// Or, you can use the shortened one-liner below (does the same thing), just condensed a bit:
// $("#searchButton").click(function(){$("#content").html($("#content").text().replace(new RegExp($("#toSearch").val(), "g"),"<span style='background-color: yellow'>"+$("#toSearch").val()+"</span>"));});

// You can modify this script to contain the rest of your character-counting capability.