I am facing some problems with my server space. The images are using all the space from the server, making it slow. As it is an eCommerce website, it cannot be slow or we lose customers.

If I have the following:

SKU's :
ABC123-001 > catName > Phone
ABC753-851 > catName > MAC
AT1233-098 > catName > PC

How can I use trim to make it the following:

SKU's :
123 > catName > Phone
753 > catName > MAC
1233 > catName > PC

Which I would use in the following script:

<script type="text/javascript">
$(function(){
    var sku = $("#ProductBreadcrumb ul li:last").text();
    $(".ProductThumbImage img").attr('src','http://img.example.com/images/'+catName+'/'+sku+'.jpg');
});
</script>

So, basically, the output for the picture link would be:

http://img.example.com/images/phone/123.jpg
http://img.example.com/images/mac/753.jpg
http://img.example.com/images/pc/1233.jpg

So yeah, first problem I have to face is.. How can I trim it?

I am not familiar with JavaScript so any help would be really appreciated :D