Creating excerpt using Javascript/jQuery

Question

I am trying to make excerpt of all h3 text with some manner using some array methods. But the problem is to select all h3 I used as selector is

var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text();

And it grabs all h3 texts together and finally I get same text for all h3

How can I select all h3 individually?

Here is JSFiddle

Here is my Code:

var productTitle = $('#products-carousel').find('.single-trending-list').find('h3').text(),
	productTitleExcerpt;
	var toArray = productTitle.split("", 36),
	joinArray = toArray.join(''),
	joinArrayToArray = joinArray.split(" "),
	joinArrayToArrayPop = joinArrayToArray.pop(),
	joinArrayToArrayPopPush = joinArrayToArray.push('...'),
	joinArrayToArrayPopPushJoin = joinArrayToArray.join(' '),
	productTitleExcerpt = joinArrayToArrayPopPushJoin;

	$('#products-carousel').find('.single-trending-list').find('h3').text(productTitleExcerpt);

<ul class="ul-trending-list" id="products-carousel">
  <li>
    <div class="single-trending-list">
      <span>$90.00</span>
      <h3>Leather Clutch, Gray Distressed</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$91.00</span>
      <h3>Sori Yanagi Butterfly Y Wenge Stool</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$31.00</span>
      <h3>BOTTLIT Canister, 600ml</h3>
    </div>
  </li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

I've made a SOLUTION . Now I've used each method and also create a function and set 3 arg to pass element, letter number, extension optional. So now I can use it anywhere.

Here is JSFiddle

And Here is the code you can see here.

var originalCarouselH3 = $('#products-carousel').find('.single-trending-list').find('h3');

	function excerpt(excerptElement, number , more = "..."){
		excerptElement.each(function(){
		var productTitle = $(this).text(),
		productTitleExcerpt,
		toArray = productTitle.split("", number),
		joinArray = toArray.join(''),
		joinArrayToArray = joinArray.split(" "),
		joinArrayToArrayPop = joinArrayToArray.pop(),
		joinArrayToArrayPopPush = joinArrayToArray.push(more),
		joinArrayToArrayPopPushJoin = joinArrayToArray.join(' '),
		productTitleExcerpt = joinArrayToArrayPopPushJoin;

		if(productTitle.length > number){
			productTitle = productTitleExcerpt;
			$(this).text(productTitle);
		}
		});
	}

	excerpt(originalCarouselH3, 30);

<ul class="ul-trending-list" id="products-carousel">
  <li>
    <div class="single-trending-list">
      <span>$90.00</span>
      <h3>Leather Clutch, Gray Distressed</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$91.00</span>
      <h3>Sori Yanagi Butterfly Y Wenge Stool</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$31.00</span>
      <h3>BOTTLIT Canister, 600ml</h3>
    </div>
  </li>
</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Answer 1

There is actually a plugin for jQuery called Succinct that truncates text. This plugin supports multi-line text. But if you do not want to include this plugin, and you only need to truncate text per-line, it easy to create one.

Here is the easiest way to do what you are trying to do, using jQuery.

$('#products-carousel .single-trending-list h3').each(function() {
  $(this).text($(this).text().substr(0, 36) + '...');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="ul-trending-list" id="products-carousel">
  <li>
    <div class="single-trending-list">
      <span>$90.00</span>
      <h3>Leather Clutch, Gray Distressed</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$91.00</span>
      <h3>Sori Yanagi Butterfly Y Wenge Stool</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$31.00</span>
      <h3>BOTTLIT Canister, 600ml</h3>
    </div>
  </li>
</ul>

But...

The correct way to do this would be the use CSS to truncate the text. This will leave the text unmodified but only displayed truncated.

.single-trending-list h3 {
  width: 11em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="ul-trending-list" id="products-carousel">
  <li>
    <div class="single-trending-list">
      <span>$90.00</span>
      <h3>Leather Clutch, Gray Distressed</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$91.00</span>
      <h3>Sori Yanagi Butterfly Y Wenge Stool</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$31.00</span>
      <h3>BOTTLIT Canister, 600ml</h3>
    </div>
  </li>
</ul>

---

jQuery Plugins to the Rescue!

(function($) {
  $.fn.truncate = function(length) {
    this.text(function(idx, txt) {
      return txt.length > length ? txt.substr(0, length) + '…' : txt;
    });
  }
  $.fn.truncateCss = function(width) {
    this.each(function() {
      $(this).css({
        width : width,
        whiteSpace: 'nowrap',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
      });
    });
  }
} (jQuery));

// ======================================================================
// USE EITHER ONE
// ======================================================================
$('#products-carousel .single-trending-list h3').truncate(22);
//$('#products-carousel .single-trending-list h3').truncateCss('11em');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<ul class="ul-trending-list" id="products-carousel">
  <li>
    <div class="single-trending-list">
      <span>$90.00</span>
      <h3>Leather Clutch, Gray Distressed</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$91.00</span>
      <h3>Sori Yanagi Butterfly Y Wenge Stool</h3>
    </div>
  </li>
  <li>
    <div class="single-trending-list">
      <span>$31.00</span>
      <h3>BOTTLIT Canister, 600ml</h3>
    </div>
  </li>
</ul>

Answer 2

This question is already long solved, but I thought I would post my solution in the case it might help other digital journey ladies / men in search of making a snippet!

I wanted to cut off the original string at a blank space. In this instance, I found lastIndexOf quite useful!

if (someString.length > EXCERPT_MAX_LENGTH) {
  excerpt = someString.substring(0, EXCERPT_MAX_LENGTH);
  excerpt = excerpt.substring(0, excerpt.lastIndexOf(' '));
  excerpt += '...';
}

Note that I append an Ellipsis to the end of the resulting shorten string!

Answer 3

Instead of finding all captions at the same time, loop through each h3 found and push the caption to an array.

var productTitle =[]; 
$('#products-carousel').find('.single-trending-list').find('h3').each(
  function() {
    productTitle.push($(this).text())
  }
)

The value of productTitle in the JSFiddle example given will be:

["Leather Clutch, Gray Distressed", "Sori Yanagi Butterfly Y Wenge Stool", "BOTTLIT Canister, 600ml"]

You can then loop through each value in the array with a for loop and do what you want with it.

Answer 4

Try to use the callBack function of .text() to achieve what you want,

$('#products-carousel .single-trending-list h3').text(function(_, txt) {
  return txt.length > 36 ? txt.substr(0, 36) + "..." : txt;
});

DEMO