Wrap certain word with <span> using jquery

Question

I have the following div:

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

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

example

If the client types select i need to wrap this select word like this in the div:

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

CSS

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

It is something very similar to what jsFiddle does. How can i achieve this?

Here is what i have tried so far : 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  ?
            }

        }
    });

});

Selvakumar Arumugam · Accepted Answer · 2012-11-06 22:41:02Z

3

I did a proof of concept with some modifications from what you originally had. See below,

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
        }
    }
});

You going to extend this further to handle

~~Backspace~~
~~HTML contents from previous inserts~~
~~Cursor position~~ Partially done, editing in the middle would still mess up the caret.

and more..

edited Nov 6, 2012 at 22:41

answered Nov 6, 2012 at 21:53

Selvakumar Arumugam

79.9k15 gold badges123 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mina Gabriel Over a year ago

thanks .. look good but why does it focus at the beginning of all the span after firing ?

Selvakumar Arumugam Over a year ago

@MinaGabriel The caret goes to beginning after you change the value of textarea using a script. you can fix this by getting the caret position before update and set it after update..

Šime Vidas Over a year ago

Step two: prevent the caret from jumping.

Selvakumar Arumugam Over a year ago

@MinaGabriel See this blog.vishalon.net/index.php/… for setting/getting caret position

Mina Gabriel Over a year ago

that was really smart of you dude

Oleg · Accepted Answer · 2012-11-07 01:03:19Z

0

Starting with a contenteditable element we can replace the markup as we need by operating directly on its innerHtml:

$('#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 this is a more readable option. Add the rangeselect method from the previous answer and we have a working fiddle

answered Nov 7, 2012 at 1:03

Oleg

25.1k8 gold badges65 silver badges94 bronze badges

Collectives™ on Stack Overflow

Wrap certain word with <span> using jquery

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related