Implementing Hashtags using Jquery

Question

What I want to do is basically is that whenever I write anything that starts with a #, the color of the tagged string should change to some other color, say blue, immediately. And when I press space to end the string, the color should change back to black. I tried a logic like this on a contenteditable div:

    if (# is pressed) 
    hashtagging = true
    append "<span>" to div

    if (space is pressed and hashtagging is true) 
    hashtagging = false
    append "</span>" to div

This is not working as expected.

Answer 1

Here's a working example, done by incorporating the solution given by Sondre with the solution by Mr_Green (Set the caret position always to end in contenteditable div) to place the caret at the end.

http://jsfiddle.net/344m4/1/

var hashTagList = [];

function logHashList(){
    hashTagList = [];
    $('.highlight').each(function(){
        hashTagList.push(this.innerHTML);
    });
    for(var i=0;i<hashTagList.length;i++){
        alert(hashTagList[i]);
    }
    if(hashTagList.length==0){
        alert('You have not typed any hashtags');
    }
}
$(function() {

    var hashtags = false;

    $(document).on('keydown', '#example-one', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                e.preventDefault();
                input_field.html(input_field.html() + "<span class='highlight'>#");
                placeCaretAtEnd(this);
                hashtags = true;
                break;
            case arrow.space:       
                if(hashtags) {         
                    e.preventDefault();
                    input_field.html(input_field.html() + "</span>&nbsp;");    
                    placeCaretAtEnd(this);
                    hashtags = false;
                }
                break;
        }

    });

});


function placeCaretAtEnd(el) {
    el.focus();
    if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
        var range = document.createRange();
        range.selectNodeContents(el);
        range.collapse(false);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

Answer 2

Something like this should do:

$(function() {

    var hashtags = false;

    $(document).on('keydown', '#myInputField', function (e) {        
        arrow = {
            hashtag: 51,
            space: 32
        };

        var input_field = $(this);
        switch (e.which) {
            case arrow.hashtag:
                input_field.val(input_field.val() + "<span class='highlight'>");
                hashtags = true;
                break;
            case arrow.space:
                if(hashtags) {
                    input_field.val(input_field.val() + "</span>");
                    hashtags = false;
                }
                break;
        }

    });

});

Now this code checks on keydown if the hashtag or space is pressed and adds a span with a class for styling to it. Reason for checking for keydown instead of keyup is to add the tags before the actual input is added to the textfield. I used a text-field as input, but modify it with whatever you need.