Question

What I need to do is grab the first <p> tag within an element, loop through all of the words, and wrap them in <span> tags. I wrote a script for this, which I thought worked, but it appears to break when some characters are in the <p> tag. I don’t know which character(s) that causes it to break though.

Here is my current code:

$(document).ready(function(){
// Transform is set on html tag by modernizr
// Apply this on all .quote boxes, even if there are multiple (most likely aren't)
$('.csstransforms .quote').each(function() {
    // Get data
    var elem = $(this).find('p:first'),
        html = elem.text(),
        words = html.split(" "),
        charCount = html.length

    $(this).append('<p class="fixed"></p>');

    // Add new words
    var tmpWord = '';
    for(i=0; i< words.length ; i++) {
        tmpWord = $.trim(words[i]);

        if(tmpWord && tmpWord != "") {
            // Maybe replace with $(elem).next('.fixed') or something?
            $('.csstransforms .quote .fixed').append('<span>'+ tmpWord +' </span>');   
        }
    }

    // Check word count, make size smaller if needed
    if(charCount > 150) {
        // Add class to .quote box
        $(this).addClass('smaller');
    }

    // Hide original <p>
    $(elem).hide();
});
});

The error i’m getting is as follows, and what you see in the text is the actual quote:

Uncaught Error: Syntax error, unrecognized expression: "In the decade or so, science has discovered a tremendous amount about the role emotions play in our lives. Researchers have found that even more than IQ, your emotional awareness and abilities to handle feelings, will determine your success and happiness in all  walks of life, including family relationships". – John Gottman, Ph. D. 

Any ideas as to what is causing this, and how to fix it? Been chewing on it on a while without success.

Update: Jsfiddle showing same error: http://jsfiddle.net/Uugbc/

Answer 1

Just for clarification. Your fiddle has
charCount = $(html).text().length;
but your variable html is not a jQuery object.

This will work better

    var elem = $(this).find('p:first'),
        html = elem.text(),
        words = html.split(" "),
        charCount = html.length; // here you had $(html).text().length;