Better "find and highlight" implementation in HTML element
Let's start by optimising your code.  Simply said, loops are the danger here.


A while loop can be quicker than a for loop, especially in cases like this. Get the length once.
Avoid looking into arrays.  Do word = words[i] once, which is much faster.
You are joining in every iteration. You should join once only after you have updated your array.
I guess the empty else isn't done yet.




var s = document.querySelector('input[type="search"]'),
    p = document.querySelector('p'),
    find = function(){
        var words = p.innerText.split(' '),
            i = words.length,
            word = '';

        while(--i) {
            word = words[i];
            if(word.toLowerCase() == s.value.toLowerCase()){
                words[i] = '&lt;span class="highlight"&gt;' + word + "&lt;/span&gt;";
            }
            else{

            }   
        }

        p.innerHTML = words.join(' ');
    }

s.addEventListener('keydown', find , false);
s.addEventListener('keyup', find , false);


Last but surely not least, the page you want to read.