jQuery: wrap every nth word in a span

Question

Is it possible in jquery to wrap each nth word in a span

so lets say I have the html string

great Prices great Service
 
         


        

Answer 1

var h3 = $('h3');
var text = h3.text().split(' ');

for( var i = 1, len = text.length; i < len; i=i+2 ) {
    text[i] = '<span>' + text[i] + '</span>';
}
h3.html(text.join(' '));

http://jsfiddle.net/H5zzq/

or

var h3 = $('h3');
var text = h3.text().split(' ');

$.each(text,function(i,val) {
    if( i % 2) {
        text[i] = '<span>' + val + '</span>';
    }
});
h3.html(text.join(' '));

http://jsfiddle.net/H5zzq/1

---

To deal with & as you requested in your comment, I created an offset variable that is incremented whenever one is encountered.

var h3 = $('h3');
var text = h3.text().split(' ');
var offset = 0;

for( var i = 1, len = text.length; i < len; i++ ) {
    if( text[i] === '&' ) {
        offset++;
    } else if( (i-offset) % 2 ) {
        text[i] = '<span>' + text[i] + '</span>';
    }
}
h3.html(text.join(' '));

http://jsfiddle.net/H5zzq/3

Answer 2

You could do it by first getting the text of the <h3> element, then split the string to an array, cycle through the array in a for loop, and whenever your iterator i is even, add span tags to the current word. Then, just rebuild the string and insert it as the text property of your <h3> tag.