Wrap certain word with <span> using jquery
<p>I have the following <code>div</code>:</p>

<pre><code>&lt;div id="query" style="width:500px; height:200px;border:1px solid black"
 spellcheck="false" contenteditable="true"&gt;&lt;/div&gt;​
</code></pre>

<p>where Clients can write their <code>SQL</code> queries.  What I was trying to do is wrap words the client enters right after hitting <kbd>Space</kbd> with a <code>span</code> and give this span a certain <code>class</code> according to the word typed:</p>

<p><em>example</em></p>

<p>If the client types <code>select</code> i need to wrap this select word like this in the div:</p>

<pre><code>&lt;span class='select'&gt; SELECT &lt;/span&gt; &lt;span&gt; emp_name &lt;/span&gt;
</code></pre>

<p>CSS</p>

<pre><code>.select{color:blue ;text-transform:uppercase;}
</code></pre>

<p>It is something very similar to what <code>jsFiddle</code> does. How can i achieve this?</p>

<p>Here is what i have tried so far : <a href="http://jsfiddle.net/esu7A/1/" rel="nofollow">jsFiddle</a></p>

<pre><code>$(function(){
    $('div').focus() ;
    $('div').keyup(function(e){
        //console.log(e.keyCode) ;
        if(e.keyCode == 32){
            var txt = $('div').text() ;
            var x = 'SELECT' ;
            $('div:contains("'+x+'")').wrap("&lt;span style='color:blue ;
      text-transform:uppercase;'&gt;") ;
            if(txt == 'SELECT'){
                console.log('found') ; // why This Doesn't do any thing  ?
            }

        }
    });

});
</code></pre>
