Keep the first 6 letters and show the rest as dots (...) JS String

Question

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 ?

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, Jun 16 '15 at 13:53
possible duplicate of [How Can I Truncate A String In jQuery?](http://stackoverflow.com/questions/4637942/how-can-i-truncate-a-string-in-jquery) — SSA, Jun 16 '15 at 13:58
@PierreMaoui : Thanks for your suggestion. I kind of agree with you. What should I use instead ? — Tiffany Soun, Jun 16 '15 at 14:05
@TiffanySoun One solution is to use [DOS short filename rules](https://support.microsoft.com/en-us/kb/142982): `Screen~.png` — Ruan Mendes, Jun 16 '15 at 14:32

depperm · Accepted Answer · 2015-06-16T14:11:05.107

3

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.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

edited Jun 16 '15 at 14:11

answered Jun 16 '15 at 13:53

depperm

10,606
4
43
67

Ohh.. I'm sorry. I totally forget that `.png` is not always. Sometimes it is `jpeg` or `jpg` . I need to restate my post. – Tiffany Soun Jun 16 '15 at 13:54

score 1 · Answer 2 · answered Jun 16 '15 at 13:55

1

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

answered Jun 16 '15 at 13:55

Ruan Mendes

90,375
31
153
217

Quick question, when you `pop()` how do you know that it will pop the right side - not the left. Your solution is working. – Tiffany Soun Jun 16 '15 at 14:03
[`Array.prototype.pop()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop) removes the last item of the array and returns it. `split('.')` returns `['Screen Shot 2015-06-16 at 8','26', '45 AM', 'png']`. [`Array.prototype.shift`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) would return (and remove) the first element of the array – Ruan Mendes Jun 16 '15 at 14:08

score 1 · Answer 3 · answered Jun 16 '15 at 13:56

See comments 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.net/tusharj/7fsyd65v/

Tschallacka · Answer 4 · 2015-06-17T10:36:27.840

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.com/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'))">

The one caveat is that it might be tricky to structure the HTML to cutoff the filename, but show the extension. This is still my preference though. — Katana314, Jun 16 '15 at 14:16
Nothing ever comes easy. stackoverflow is not a copy and paste site :P you are supposed to learn hehe. Nice part of this is you can have the full file name for google purposes, without it cluttering the gui. — Tschallacka, Jun 17 '15 at 13:40

score 0 · Answer 5 · answered Jun 16 '15 at 13:54

0

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

answered Jun 16 '15 at 13:54

Rob Scott

7,921
5
38
63

score 0 · Answer 6 · answered Jun 16 '15 at 13:56

0

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

answered Jun 16 '15 at 13:56

Sudharsan S

15,336
3
31
49

score 0 · Answer 7 · answered Jun 16 '15 at 14:00

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

Keep the first 6 letters and show the rest as dots (...) JS String

Example

7 Answers7