title: Splitting node content in JavaScript DOM -
body: <p><a href="https://stackoverflow.com/questions/7237865/splitting-node-content-in-javascript-dom/7238184#7238184">This existing answer is an excellent piece of code</a> that very nearly does what I want.  Like the OP in that questions I want HTML tags to be split, but based on a  tag rather than an offset, and bounded by an item that should not be split.</p>
  
  <p>That is, I want to turn this:</p>
  
  <pre><code>&lt;p&gt;
    &lt;strong&gt;hi there, how &lt;em&gt;are &lt;span&gt;y&lt;!--break--&gt;ou&lt;/span&gt; doing&lt;/em&gt; today?&lt;/strong&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>into this:</p>
  
  <pre><code>&lt;p&gt;
    &lt;strong&gt;hi there, how &lt;em&gt;are &lt;span&gt;y&lt;/span&gt;&lt;/em&gt;&lt;/strong&gt;
    &lt;!--break--&gt;
    &lt;strong&gt;&lt;em&gt;&lt;span&gt;ou&lt;/span&gt; doing&lt;/em&gt; today?&lt;/strong&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>I'm still getting my head around javascript so while I had a play with the jsbin provided by @Hemlock I couldn't get it to do what I intended.</p>
  
  <p>The given answer was:</p>
  
  <pre><code>function splitNode(node, offset, limit) {
    var parent = limit.parentNode;
    var parentOffset = getNodeIndex(parent, limit);
  
    var doc = node.ownerDocument;  
    var leftRange = doc.createRange();
    leftRange.setStart(parent, parentOffset);
    leftRange.setEnd(node, offset);
    var left = leftRange.extractContents();
    parent.insertBefore(left, limit);
  }
  
  function getNodeIndex(parent, node) {
    var index = parent.childNodes.length;
    while (index--) {
      if (node === parent.childNodes[index]) {
        break;
      }
    }
    return index;
  }
  </code></pre>