Text Highlight

A text highlighter with pure javascript

by slawe

HTML

<input type="text" id="highlighter" >
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus consequat ullamcorper. Integer augue ipsum, dapibus sit amet congue in, sollicitudin eget lacus. Nunc sagittis venenatis nisi, vel accumsan justo sodales vestibulum. Donec metus orci, mattis iaculis vestibulum et, fermentum sed sapien. Suspendisse convallis pharetra arcu, id dignissim odio fringilla vel. Suspendisse tincidunt ante fringilla neque sollicitudin suscipit. Quisque velit quam, semper et dictum vel, tristique eget sem. Suspendisse eu lacus neque, non rutrum tellus. Aliquam mollis ligula sed nisl gravida eget viverra erat aliquam. Nulla vehicula, magna et tristique molestie, mauris urna euismod felis, id tempus purus mi ut tellus. Mauris molestie venenatis mi ut sagittis. Duis a diam orci, vitae ullamcorper nibh. Proin lobortis felis vitae erat gravida cursus. Pellentesque id nunc neque. Sed imperdiet pulvinar lectus, a tempor sapien molestie ultricies.</div>

CSS

span.highlight{
    background-color: yellow;
    outline: 1px solid orange;
}

JavaScript

// Input element
var input = document.getElementById("highlighter"), 
    // Text container element
    divText = document.getElementById("text"),
    // using textContent property if it exists
    textProp = ("textContent" in divText) ? "textContent" : "innerText",
    // Getting text to discard html tags (delete line 6 and use divText.innerHTML if you want to keep the HTML tags)
    originalText = divText[textProp];

function handler(){
    // if Input.value is empty clear the highlights
    if(!this.value){
        divText.innerHTML = originalText;
        return true;
    }
    // Regex to group the matches, with tags 'global' and 'case insensitive'
    var regex = new RegExp("("+this.value+")", "ig");
    // replace text with the new one ($1 refers to first group matched by regex)
    divText.innerHTML = originalText.replace(regex, "<span class='highlight'>$1</span>");
    
};
// adding listener to input.. IE uses attachEvent method
input.addEventListener("keyup", handler, false);