Question

I have a div id=”X” within that i have multiple p , what i want is that jquery select the first p and from that p take the first 25 words and give them the Class excerpt

$("p:first").addClass("excerpt");

This isn’t a problem but how to limit the words ?

Answer 1

You have to go into the text node inside the p element and split up the text data, then put a new wrapper element around those words, and give that wrapper a class. You can’t add a class directly to text itself.

jQuery doesn’t really give you much in the way of tools for manipulating text nodes so you will have to do this using some plain DOM too, eg:

var p= $('p')[0];
if (p.firstChild!==null && p.firstChild.nodeType===3) { // TEXT_NODE
    // work out how many characters into the text 25 words is
    var ix= p.firstChild.data.match(/^\s*(\S+\s*){0,25}/)[0].length;
    // split into two text nodes
    p.firstChild.splitText(ix);
    // put the first of them into a span
    $(p.firstChild).wrap('<span class="excerpt">');
}

This requires that the text in the element be a single direct text node. If you’ve got a situation where there are more elements inside the text, eg:

<p>
    a b c d e f g h i j k l m n o
    <em>p q r s t u v w x y (25th word here) z</em>
</p>

then the question becomes much trickier, as you can’t wrap a <span> around just part of an element.