​

​

var sel;

var savedSel;

var userInput;

var cursorPos;

​

​

function formatText() {

​

    el = document.getElementById("area");

    userInput = el.textContent || el.innerText; 

​

    sel = rangy.getSelection();

    var range = sel.getRangeAt(0);

    // Get the text preceding the selection boundaries and then remove whitespace to get the character offsets

    var rangePrecedingBoundary = range.cloneRange();

    rangePrecedingBoundary.setStart(el, 0);

    var selEndOffset = rangePrecedingBoundary.text().replace(/\s+/g, '').length;

    rangePrecedingBoundary.setEnd(range.startContainer, range.startOffset);

    var selStartOffset = rangePrecedingBoundary.text().replace(/\s+/g, '').length;

    rangePrecedingBoundary.detach();

    //strip spaces from userInput

    userInput2 = userInput.replace(/\s+/g, '');

    //apply style

    var newHTML = "<span style='color: green'>" +  userInput2 + "</span>";  

    //replace innerHTML of DIV

    el.innerHTML = newHTML;

    /* debug DIVs */

    $('#cursorPos').text(selStartOffset + " - " + selEndOffset);

    $('#userInputlength').text(userInput.length);

    $('#userInput2length').text(userInput2.length);

    /* end debug */

​

    range.selectCharacters(el, selStartOffset, selEndOffset);

    sel.setSingleRange(range);

}

​