Extract first n words from jQuery string, Wordpress style expression In jQuery (x Number of words

Question

I have a small jQuery snippet that works, but to improve my JS, I would like to offer tips on how to increase its efficiency.

This feature reduces WordPress exposure. It takes the original WordPress Excerpt and excerpts of the first 40 words ... that part that I care about. After that, he adds the Continue Reading link at the end of the original Excerpt and adds it to the end of the truncated version.

Again, I just thought it would be a faster / shorter way to return a truncated shutter speed. I tried the "slice" and got a bunch of commas.

jQuery('.page-id-7 .promo_slider_excerpt').each(function (i) { var s = jQuery(this).html(); var sw = s.split(' '); // separate contents into array of words var t = []; var v; if (sw.length > 40) { var a = jQuery(this).children('a'); // this is the Continue Reading link for (v = 0; v < 40; v++) { t = (t + ' ' + sw[v]); // Build the shortened excerpt (this is the part I wanted to improve) } t = (t + ' ' + a[0].outerHTML); // Add the Continue Reading onto the end jQuery(this).html(t); } else { t = s; jQuery(this).html(t); } }); 

Answer 1

For the first forty words and links to continue reading, I suggest:

 var s = jQuery(this).text(), fortyWords = s.split(' ').slice(0,39).join(' '), link = document.createElement('a'), linkText = document.createTextNode('continue reading'); link.href = 'http://path.to.article/'; link.appendChild(linkText); $(this).text(fortyWords).append(link); 

JS Fiddle proof of concept .

---

Edited in response to additional questions from OP (in the comments below):

1: Is there a way in Firebug to note the effectiveness of one method against another? IOW: your example looks good, but can I compare its memory and speed against my loop?

Honestly, I don’t know, I'm afraid I don’t use Firefox at all, and although I use Chromium almost exclusively, I haven’t worked with it long enough to detect profiling tools for memory usage or speed.

However, there is JS Perf that allows you to run tests to show the speed of specific approaches; although it does not affect memory usage at all.

2: My version uses the .html() method and the .outerHTML property. I continue to see messages on the Internet that they are not reliable. Is this something from IE6? My users are all pretty current, so I wonder why you decided to use .text() and then add node?

html() is a good approach to use, but ideally for use only if you want to work with html in a string format; in the above example, it was easier to work with strings, since all I really wanted to work with was a text string. If the element contained other elements that I manipulated with text() , then I had to use html() , otherwise these elements would be rewritten when writing / replacing text in the DOM.

I seem to remember that I did not have much success using outerHTML historically and, frankly, empirically. Therefore, I rarely think to use it, although this is just a matter of personal preference. As for being a hold on IE 6? I'm not sure; I won’t be surprised, but I don’t know at all, unfortunately.

I decided to use text() because I, as already noted, worked with text; and then I added node, separately, in html() , because I inserted html node. If I used the same content completely with html() , then this, I think, worked. But, again, only personal preference and, I think, it makes it clear that I manipulate / work with text or html.

Literature:

• JQuery:
  • append() .
  • slice() .
  • text() .
• "Normal" non-JavaScript library:
  • appendChild() .
  • document.createElement() .
  • document.createTextNode() .
  • join() .
  • slice() .
  • split() .

Answer 2

JQuery should not be used for this. You can change your shutter speed, but you need filters. Let the server do the work:

 remove_filter('get_the_excerpt', 'wp_trim_excerpt'); add_filter('get_the_excerpt', 'new_excerpt_format'); function new_excerpt_format($text) { global $post; $raw_excerpt = $text; if(!$text) { $text = get_the_content(''); $text = strip_shortcodes($text); $text = apply_filters('the_content', $text); $text = str_replace(']]>', ']]&gt;', $text); $exceptions = ''; //PRESERVE CERTAIN TAGS, ADD/REMOVE AS NEEDED (ex: <p>,<a>,<em>,<strong>,<br>) $text = strip_tags($text, $exceptions); $maxCount = 55; //DEFAULT WP WORD COUNT, INCREASE/DECREASE AS NEEDED $excerpt_length = apply_filters('excerpt_length', $maxCount); $moreText = '.... <a href="'.get_permalink($post->ID).'">Read More &gt;&gt;</a>'; //CUSTOM MORE TEXT, CHANGE AS NEEDED $excerpt_more = apply_filters('excerpt_more', $moreText); $words = preg_split("/[\n\r\t ]+/", $text, $excerpt_length+1, PREG_SPLIT_NO_EMPTY); if(count($words) > $excerpt_length) { array_pop($words); $text = implode(' ', $words); $text = $text.$excerpt_more; } else $text = implode(' ', $words); } return apply_filters('wp_trim_excerpt', $text, $raw_excerpt); } 

Just add this to your functions.php file and it should take care of everything you need. Let me know if this helps.