Way to make backspace delete whole words at a time

Question

I have a text area:

<textarea type="input"  id="txtText">Hello+world-how*are+you</textarea>

I want a way for backspace to delete a whole word every time it is clicked using Javascript or Angular js. When I press backspace I want it to split by operators and delete from the end. The first backspaces in the above example would delete 'you' then 'are' then 'how' and so on. But if the mouse is on 'world' then it deletes 'world' first, then 'Hello'.

Answer 1

Here is a solution than uses the data attribute to match for changes: jsFiddle

jQuery('#EditableDiv').keyup(function(e) {
  if (jQuery(e.target).text().length < jQuery(e.target).attr("data-value").length) {
    var data = jQuery(e.target).attr("data-value").split(" ");
    var text = jQuery(e.target).text().split(" ");
    for (var a = 0; a < data.length; a++) {
      if (text[a] != data[a]) {
        text.splice(a, 1);
        break;
      }
    }
    jQuery(e.target).text(text.join(" "));
  }
  jQuery(e.target).attr("data-value", jQuery(e.target).text());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="EditableDiv" contenteditable="true" data-value="Hello, how are you" class="size">Hello, how are you</div>