​

​

var sel;

var savedSel;

var userInput;

var cursorPos;

​

​

function formatText() {

​

    el = document.getElementById("area");

    userInput = el.textContent || el.innerText; 

​

    sel = rangy.getSelection();     

    savedSel = sel.saveCharacterRanges(el);

    cursorPos = sel.getRangeAt(0).toCharacterRange(el).start-1; 

    //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(cursorPos);

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

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

    /* end debug */

​

    if(userInput2.length<userInput.length && cursorPos>userInput2.length )

    {

      /*

      alert("Spaces have been stripped and cursor position falls beyond Rangy's saved range--> Rangy won't be able to restore");

      */

      /*

      el.focus();

      rangy.getSelection().move("character", userInput2.length-1);

      */

    } else { //restore selection normally

    sel.restoreCharacterRanges(el, savedSel);

    }

}

​