jQuery issue with editing heading tags using html()

Basically I have a load of H1 H2 and H3 tags on a website and I want to be able to put a span around PART of these heading tags.

At the moment I have this:

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(" "开发者_JAVA百科);
                // count the words
                var wordCount = theWords.length;
                var newHtml;
                if(wordCount < 2){
                    // only one word
                    newHtml = theHtml;
                }
                else if(wordCount == 2){
                    // word count is 2...
                    newHtml = theWords[0]+" <span style='color: #000'>"+theWords[1]+"</span>";
                }
                else {
                    // add the first two words:
                    newHtml = theWords[0]+" "+theWords[1]+" <span style='color:#000'>";

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

                    //end
                    newHtml = newHtml+"</span>";
                }
                jQuery(this).html(newHtml);
            });

        });

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

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!

Any ideas?

Thank you.

Edit:

This is what the problematic html looks like:

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

And like this:

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

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

Hey! Nice one, I think this is possible with regular expressions. I made a quick example for you, covering the a and the div for the biggest part. All spaces that are not meant as real whitespaces (in the tags) are replaced with symbols like ___ or ---, which are changed back afterwards. Take a look at this jsfiddle!

theHtml = theHtml.replace(/[\s]+\</gi,'<');
theHtml = theHtml.replace(/\s+[\'\"]/gi,'___');
theHtml = theHtml.replace(/[\'\"]\s+/gi,'---');
theHtml = theHtml.replace(/a\s/gi,'a_');
theHtml = theHtml.replace(/div\s/gi,'div_');

and backwards:

newHtml = newHtml.replace(/___/gi,' "');
newHtml = newHtml.replace(/---/gi,'" ');
newHtml = newHtml.replace(/div_/gi,'div ');
newHtml = newHtml.replace(/a_/gi,'a ');

COMMENT after your edit

This will not work for the example h1 and h2 you posted. This is just an idea of how to approach this. I hope this will help you! Good luck!

COMMENT2 after my own edit ;-)

It does work, I just forgot to add case insensitivity and recursivity! It's just not finished yet. There are more checks needed such as ' or " etc. Here you go, I hope this will get you on the right track.

Please use the jQuery .text() function to strip out all the text within any particular H1, H2 tags etc. Other HTML inside these tags will be ignored.

But, i'm not sure how you will restore all the Inner HTML tags back.

Have you tried jQuery's wrapInner() function? I think it does what you're looking for in just one line.

$('h1, h2, h3').wrapInner('<span></span>');

If you know what class will be in the "inner" HTML element, you can just grab that.

var outer = $('.entry-title');
var html = html.find('.fee-field');

if(html === null){
    html = outer;
}

// html will either be your `h` element or your inner most element.