jQuery issue with editing heading tags using html()
<p>Basically I have a load of H1 H2 and H3 tags on a website and I want to be able to put a <code>span</code> around PART of these heading tags.</p>

<p>At the moment I have this:</p>

<pre><code>jQuery(document).ready(function(){

            // get all headings first
            jQuery('h1, h2, h3').each(function(){
                // get the text
                var theHtml = jQuery(this).html();
                // split by spaces
                var theWords = theHtml.split(" ");
                // count the words
                var wordCount = theWords.length;
                var newHtml;
                if(wordCount &lt; 2){
                    // only one word
                    newHtml = theHtml;
                }
                else if(wordCount == 2){
                    // word count is 2...
                    newHtml = theWords[0]+" &lt;span style='color: #000'&gt;"+theWords[1]+"&lt;/span&gt;";
                }
                else {
                    // add the first two words:
                    newHtml = theWords[0]+" "+theWords[1]+" &lt;span style='color:#000'&gt;";

                    // need to loop through the array now
                    for(var i = 2; i&lt;wordCount; i++){
                        newHtml = newHtml+theWords[i];
                        if(i+1 &lt; wordCount){
                            newHtml = newHtml+" ";
                        }
                    }

                    //end
                    newHtml = newHtml+"&lt;/span&gt;";
                }
                jQuery(this).html(newHtml);
            });

        });
</code></pre>

<p>Which works quite well. But now I have a problem which is sometimes there is an <code>a</code> element or a <code>div</code> (for an inline editor if logged in as an admin) in the titles which is breaking this...</p>

<p>How would I get around this? I need to potentially get all the html from the header tag, strip the HTML tags, add the span around the latter part, then put the html back in!</p>

<p>Any ideas?</p>

<p>Thank you.</p>

<p><strong>Edit:</strong></p>

<p>This is what the problematic html looks like:</p>

<pre><code>&lt;h1 class="entry-title"&gt;&lt;div data-type="input" data-post_id="12" class="fee-field fee-filter-the_title"&gt;Bristish Society of Blood and Marrow Transplantation&lt;/div&gt;&lt;/h1&gt;
</code></pre>

<p>And like this:</p>

<pre><code>&lt;h2 class="entry-title"&gt;&lt;a href="#" title="Permalink to About the Registry" rel="bookmark"&gt;&lt;div data-type="input" data-post_id="62" class="fee-field fee-filter-the_title"&gt;About the Registry&lt;/div&gt;&lt;/a&gt;&lt;/h2&gt;
</code></pre>

<p>But if not logged in as an administrator then the div's go away.</p>
