Wrap bestimmtes Wort mit <span> mit Jquery

Question

Ich habe folgendes div:

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

wo Kunden ihre SQL Abfragen schreiben. Was ich versuche zu tun, wickeln Worte des Kunde Recht tritt nach Raum mit einem span und gibt diese Spanne ein gewisses class nach dem Wort schlagen getippt:

Beispiel

Wenn der Client-Typ select ich brauche dieses Auswahlwort wie dies in dem div wickeln:

<span class='select'> SELECT </span> <span> emp_name </span> 

CSS

.select{color:blue ;text-transform:uppercase;} 

Es ist etwas sehr ähnlich zu dem, was jsFiddle tut. Wie kann ich das erreichen?

Hier ist, was ich versucht habe bisher: jsFiddle

$(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("<span style='color:blue ; 
     text-transform:uppercase;'>") ; 
      if(txt == 'SELECT'){ 
       console.log('found') ; // why This Doesn't do any thing ? 
      } 

     } 
    }); 

}); 

Answer 1

ich ein Proof of Concept hat mit einigen Modifikationen von dem, was Sie ursprünglich hatte. Siehe unten,

DEMO:http://jsfiddle.net/cgy69/

$(function() { 
    $('div').focus(); 
    var x = ['SELECT', 'WHERE', 'FROM']; 
    $('div').keyup(function(e) { 
     //console.log(e.keyCode) ; 
     if (e.keyCode == 32) { 

      //using .text() remove prev span inserts 
      var text = $.trim($(this).text()).split(' ');    
      $.each(text, function(i, v) { 
       $.each(x, function(j, xv) { 
        if (v.toUpperCase() === xv) { 
         text[i] = '<span style="color: blue; text-transform: uppercase;">' + v + '</span>';  
        }           
       }); 
      }); 

      $(this).html(text.join(' ') + '&nbsp;'); 

      setEndOfContenteditable(this); 
     } 
    }); 

    function setEndOfContenteditable(contentEditableElement) { 
     var range, selection; 
     if (document.createRange) //Firefox, Chrome, Opera, Safari, IE 9+ 
     { 
      range = document.createRange(); //Create a range (a range is a like the selection but invisible) 
      range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range 
      range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
      selection = window.getSelection(); //get the selection object (allows you to change selection) 
      selection.removeAllRanges(); //remove any selections already made 
      selection.addRange(range); //make the range you have just created the visible selection 
     } 
     else if (document.selection) //IE 8 and lower 
     { 
      range = document.body.createTextRange(); //Create a range (a range is a like the selection but invisible) 
      range.moveToElementText(contentEditableElement); //Select the entire contents of the element with the range 
      range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start 
      range.select(); //Select the range (make it the visible selection 
     } 
    } 
}); 

Sie gehen, diese auszuweiten

1. Rück
2. HTML Inhalte von früheren Einsätzen zu handhaben
3. Cursorposition Teilweise fertig, die Bearbeitung in der Mitte würde den Caret immer noch durcheinander bringen.

und mehr ..

Answer 2

mit einem contenteditable Element starten wir das Markup ersetzen können, wie wir durch den Betrieb direkt auf seine innerHtml benötigen:

$('#query-container').on('keyup', function(e){ 
    var $this = $(this); 
    //(?!\<\/b\>) negative lookahead is used so that anything already wrapped 
    //into a markup tag would not get wrapped again 
    $this.html($this.html().replace(/(SELECT|UPDATE|DELETE)(?!\<\/b\>)/gi, '<b>$1</b>')); 
    setEndOfContenteditable(this); 
}); 

IMO ist dies eine besser lesbare Option. Fügen Sie die Methode rangeselect von der vorherigen Antwort hinzu und wir haben a working fiddle