title: Delete whole anchor tag in contenteditable div on one keypress
body: <p>I have following HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8" /&gt;
          &lt;title&gt;Document&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="edit" contenteditable&gt;
              This is &lt;a href="#"&gt;link&lt;/a&gt; that is editable.
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I'm trying to do is a very simple text editor where you can put in links (they would get turned into html via JS) but when you hit backspace in the back or delete in front of them, I want it to disappear at once (not deleting anchor text letter by letter).</p>
  
  <p>How would one go about it? My steps with Javascript would be sth like this:</p>
  
  <ol>
  <li>When pressing Backspace key, detect if <code>&lt;/a&gt;</code> is before the cursor, if so run regex on the section before cursor, pick a first match and replace it with blank space.</li>
  <li>The opposite, detect if Delete key is pressed, check if <code>&lt;a ... &gt;</code> is in front of it and remove it as well.</li>
  </ol>
  
  <p>I'm just not quite sure how to put this in code and also if I can run regex and have it recognize the text in contenteditable area. I'd like to avoid any heavy external libraries because the text editor will not really do much more besides this.</p>
  
  <p>If anybody wants to fork <a href="http://codepen.io/anon/pen/XdbadP" rel="nofollow">my Codepen here it is</a>.
  Thanks for any advice.</p>