Digital Essence Digital Essence - 1 year ago 70
jQuery Question

Trying to truncate a string and replace with ... in JQuery


I have just realised that my HTML is only displaying the artist & song, not the album which is why when I had


in there I was getting unexpected results. The jQuery trim is now working as expected.
Thank you for your answers which I will keep for other scripts.

I'm using JQuery to grab the last 10 songs played from a lastfm user and display them.

I would like to truncate the album names down to x characters and replace with ...

The string is:

album = item.album['#text'];

and it is displayed here:


I have tried using:

var shortText = jQuery.trim(album).substring(0, 10)
.split(" ").slice(0, -1).join(" ") + "...";

but it just displays the full album string and no amount of fiddling or javascript seems to work.


I have just tried

album = item.album['#text'];

to see what it thinks is there and I get some very results that don't match any of the other strings produced by the script so really am stuck now!

The full script is as follows:

* jQuery Last.Fm Plugin by Engage Interactive
* Examples and documentation at:
* Copyright (c) 2009 Engage Interactive
* Version: 1.0 (10-JUN-2009)
* Dual licensed under the MIT and GPL licenses:
* Requires: jQuery v1.3 or later

$.fn.lastFM = function(options) {

var defaults = {
number: 5,
username: 'xxxxxxx',
apikey: 'xxxxxxxx',
artSize: 'medium',
noart: 'images/noartwork.gif',
onComplete: function(){}
settings = $.extend({}, defaults, options);

var lastUrl = ''+settings.username+'&api_key='+settings.apikey+'&limit='+settings.number+'&format=json&callback=?';
var $this = $(this);

var container = $this.html();


if(settings.artSize == 'small'){imgSize = 0}
if(settings.artSize == 'medium'){imgSize = 1}
if(settings.artSize == 'large'){imgSize = 2}

this.each(function() {

$.getJSON(lastUrl, function(data){
$.each(data.recenttracks.track, function(i, item){

if(item.image[1]['#text'] == ''){
art = settings.noart;
art = stripslashes(item.image[imgSize]['#text']);

url = stripslashes(item.url);
song =;
artist = item.artist['#text'];
album = item.album['#text'];
// this is the part where I try to truncate "album"
var shortText = $.trim(album).substring(0, 10)
.split(" ").slice(0, -1).join(" ") + "...";


var $current = $this.children(':eq('+i+')');

$current.find('[class=lfm_art]').append("<img src='"+art+"' alt='Artwork for "+album+"'/>");
$current.find('a').attr('href', url).attr('title', 'Listen to '+song+' on Last.FM').attr('target', '_blank');



//Clean up the URL's
function stripslashes( str ) {
return (str+'').replace(/\0/g, '0').replace(/\\([\\'"])/g, '$1');

thanks for your help.

Bob Bob
Answer Source

If you're trying to truncate the album/title by spaces after 10th character you can use the indexOf method

var album = "   This is the're long title of the album    ";

album = $.trim(album); //make sure to trim the album first
if (album.length > 10) {
  //the indexOf will return the position of the first space starting from the 10th
   alert(album.substring(0, album.indexOf(' ',10)) + "...");

Source MDN

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download