实施例

Question

我有一个文件名 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);

在我将它们拆分回屏幕之前，我想检查长度是否大于10，

如果是，请保留前6个字母，其余字母显示为3个点(...)

实施例

Screen Shot 2015-06-16 at 8.26.45 AM.png - ＆gt; Screen...png

有人可以给我一些提示来实现这个目标吗？

Answer 1

试试这个

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>

Answer 2

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

Answer 3

在代码中查看内联注释：

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

演示：http://jsfiddle.net/tusharj/7fsyd65v/

Answer 4

或者离开这个潮流，使用css省略号

以下所有内容都是必需的，因此文本必须在一条直线上，该行会溢出隐藏溢出的框。

这里有许多技术，包括多行省略号。

来源：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'))">

Answer 5

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

Answer 6

尝试

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

Answer 7

像这样使用RegEx：

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

保留前6个字母并将其余部分显示为点（...）JS String

实施例

7 个答案: