title: Select part of the text in a div
body: <p>I have an SVG element in which I have made a foreignObject. The foreignObject contains two objects a textarea and a div. The textarea lies on top of the div and is transparent. When people type in the textarea the text is copied to the div (a WYSIWYG kind of editor). This all works fine. The problem is however: when you select text in the textarea (which is 100% transparent) you can't see what text you have selected and so now I want to create a code which copies the selection to the text in the div.</p>
  
  <p>I have the following to bits, this bits tells me what is selected in the textarea:</p>
  
  <pre><code>var start = e.target.selectionStart;
  var end = e.target.selectionEnd;
  </code></pre>
  
  <p>(e is the event of a select eventlistener)</p>
  
  <p>and the following selects the text in the div:</p>
  
  <pre><code>div = $(e.target).next('div');
  div = div[0];
  
  selection = window.getSelection();
  range = document.createRange();
  range.selectNodeContents(div);
  selection.addRange(range);
  </code></pre>
  
  <p>This works, but selects all text in the div. How do I constrain the selection to only the part selected in the textarea?</p>
  
  <p>(by the way this code is for a demo-application and only needs to work in firefox)</p>