Edit in JSFiddle

var snippets = [{
    name: "brb",
    body: "be right back",
    timestamp: "March 03, 2015"
}, {
    name: "asap",
    body: "as soon as possible",
    timestamp: "March 03, 2015"
}, {
    name: "afaik",
    body: "as far as i know",
    timestamp: "March 03, 2015"
}];

function formatSnippets(node) {
    /*assumes node is a textarea element*/
    var selection = window.getSelection(),
        range = selection.rangeCount ? selection.getRangeAt(0) : null,
        offset = range ? range.endOffset : node.selectionStart, // the caret position in the node
        snip, // holds current snippet
        length, // holds current snippet name’s length
        valueND = node.value; // holds value of node

    // loop through Snippets arrray
    for (var i = 0, len = snippets.length; i < len; i++) {
        snip = snippets[i];
        length = snip.name.length;

        // the key part
        // gets the text immediately behind the user’s cursor (caret)
        // checks if it corresponds with the current snippet name

        var textBehind = valueND.substring(offset - length, offset);
        if (textBehind === snip.name) { // performs snippet replacement    

            var snipBody = snip.body,
                // take value before snip name
                beginValue = valueND.substring(0, offset - length),
                // take value after snip name end
                endValue = valueND.substring(offset),
                // length where snip body starts
                beginLength = beginValue.length,
                // length where snip body ends
                endLength = (beginValue + snipBody).length;

            //snipBody = formatMacros(snipBody); // covered in 3rd blog post

            // concatenate everything together!
            node.value = beginValue + snipBody + endValue;

            // set caret position (at end of snippet body)
            node.selectionEnd = node.selectionStart = endLength;

            // snippet replacement done; move out of loop
            break;
        }
    }
} // formatSnippets function ends

function handleKeyDown(event) {
    var keyCode = event.keyCode;

    // [Shift] + [Space] = formatting snippets
    if (event.shiftKey && keyCode === 32 && !event.ctrlKey) {
        event.preventDefault(); // do not insert space (default event)
        formatSnippets(this); // format snippets in `this` (node)
    }
}

document.onkeydown = function (event) {
    var node = event.target;

    // run only if the node is a <textarea>
    if (node.tagName === "TEXTAREA") handleKeyDown.call(node, event);
};

Try typing "brb", "asap" or "afaik" and pressing Shift+Space:
<br>
<br>
<textarea></textarea>