I have a file name file_name = Screen Shot 2015-06-16 at 8.26.45 AM.png

var file_path = this.value;
var file_path_array = file_path.split("\\");
var file_name = file_path_array[file_path_array.length - 1 ];
if (file_name.length > 10){
    file_name = ???
} 

$('#file_name-cv').text(file_name);

Before I split them back out to screen, I want to check to see if the length is greater than 10,

if it is, keep the first 6 letters, the rest show them as 3 dots (...)

Example

Screen Shot 2015-06-16 at 8.26.45 AM.png --> Screen...png

Can someone please give me some hints to achieve this ?

I have a file name file_name = Screen Shot 2015-06-16 at 8.26.45 AM.png

var file_path = this.value;
var file_path_array = file_path.split("\\");
var file_name = file_path_array[file_path_array.length - 1 ];
if (file_name.length > 10){
    file_name = ???
} 

$('#file_name-cv').text(file_name);

Before I split them back out to screen, I want to check to see if the length is greater than 10,

if it is, keep the first 6 letters, the rest show them as 3 dots (...)

Example

Screen Shot 2015-06-16 at 8.26.45 AM.png --> Screen...png

Can someone please give me some hints to achieve this ?

• javascript
• jquery

• 2 You should avoid using three dots just before an extension as it can be confused with the dot used for the extension itself (but this is only my opinion). – Pierre Maoui Commented Jun 16, 2015 at 13:53
• 1 possible duplicate of How Can I Truncate A String In jQuery? – SSA Commented Jun 16, 2015 at 13:58
• @PierreMaoui : Thanks for your suggestion. I kind of agree with you. What should I use instead ? – Tiffany Soun Commented Jun 16, 2015 at 14:05
• 1 @TiffanySoun One solution is to use DOS short filename rules: Screen~.png – Ruan Mendes Commented Jun 16, 2015 at 14:32
• That works - I guess. – Tiffany Soun Commented Jun 16, 2015 at 14:39

7 Answers 7

Try this

var file_name = 'Screen Shot 2015-06-16 at 8.26.45 AM.png';
var file_ext = file_name.substring(file_name.lastIndexOf('.')+1);
if (file_name.length > 10){
    file_name = file_name.substring(0,6)+'...'+file_ext;
} 

console.log(file_name);

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

if (file_name.length > 10){
    file_name = file_name.substring(0, 6) + '...' + file_name.split('.').pop()
}    

See ments inline in the code:

var fileName = 'Screen Shot 2015-06-16 at 8.26.45 AM.png';
var arrFileExt = fileName.split('.'); // To get the file extension
var fileExt = arrFileExt[arrFileExt.length - 1]; // File extension

arrFileExt.pop(); // Remove file extension from array
fileName = arrFileExt.join('.'); // filename without extension
// Screen Shot 2015-06-16 at 8.26.45 AM


// If length is greater than 6 characters then only add ellipsis
var displayName = fileName.length > 6 ? fileName.substr(0, 6) + '...' + fileExt : fileName;

$('#file_name-cv').text(displayName); // Update file name

Demo: http://jsfiddle/tusharj/7fsyd65v/

Or going off the bandwagon, use css ellipsis

All the following are required, so the text must be in a single straight line that overflows a box where that overflow is hidden.

A bunch of more techniques here, including multi-line ellipsis.

Source: https://css-tricks./snippets/css/truncate-string-with-ellipsis/

var stupidname = "Hello-05028389059.8484.4848_888-image-from-shutterstock.jpg";
function cutup(what) {
  var container = document.createElement('div');
  container.setAttribute('class', 'filenamecontainer');
  var nameitself = document.createElement('div');
  nameitself.setAttribute('class', 'truncate');
  var extension = document.createElement('div');
  var ext = what.substring(what.lastIndexOf('.'));
  var name = what.substring(0,what.lastIndexOf('.'));
  nameitself.appendChild(document.createTextNode(name));
  extension.appendChild(document.createTextNode(ext));
  container.appendChild(nameitself);
  container.appendChild(extension);
  document.getElementById('hello').appendChild(container);
  }
cutup(stupidname)

.truncate {
      max-width: 112px;
      white-space: nowrap;
      
      overflow: hidden;
      text-overflow: ellipsis;
    }
.filenamecontainer div {
  margin:0px;
  padding:0px;
  float:left;
  display:inline-block;
  }

.filenamecontainer {
  display:block;
  clear:both;
  }

<div id='hello'>
</div>
<input type="button" value="hit me" onclick="cutup(window.prompt('enter filename'))">

var fileExt = file_name.substr(0, file_name.lastIndexOf('.') - 1);
var newFileName = file_name.substr(0, 6) + ... + fileExt;

Try

var str = 'Screen Shot 2015-06-16 at 8.26.45 AM.png';
var rep  = str.split(" ").join("");
alert(rep.substring(0,6) + '.' + rep.split(".").pop())

Fiddle

Use RegEx like this:

var regex = /(\w{6}).+([.]\w*)/g,
    input1 = 'Screen Shot 2015-06-16 at 8.26.45 AM.png',
    input2 = 'Scr.png'
;

console.log(input1.replace(regex, '$1..$2')); // Screen...png

console.log(input2.replace(regex, '$1..$2')); // Scr.png