Question

I’m trying to insert a span around the first word in an H1 tag.

Unfortunately the tags can also be links and can include classes etc, eg:

1. Source = <h1>This is a test</h1>

   Output = <h1><span>This</span> is a test</h1>

2. Source = <h1 class="blah blah"><a href="#">This is a test<a/></h1>

   Output = <h1 class="blah blah"><a href="#"><span>This</span> is a test<a/></h1>

Has anyone done this before in say jQuery?

Answer 1

Works for both “a” tag in it and plain text.

$('h1').each(function(){
        if($(this).find('a').length>0)
        {
            var text = $(this).find('a').html();
            text = text.split(' ');
            if(text.length>0)
            {
                text[0] = '<span>' + text[0] + '</span>';
                $(this).find('a').html(text.join(' '));
            }
        }
        else
        {
            var text = $(this).html();
            text = text.split(' ');
            if(text.length>0)
            {
                text[0] = '<span>' + text[0] + '</span>';
                $(this).html(text.join(' '));
            }
        }
    });

Demo