js实现字符缩略...显示

Question

编写一个方法，格式化字符串：

原始字符串为："哈哈ddd呵呵789哈哈88998哈.xls"
要求:'.xls'前面的字符串，最多保留中文字符9个，数字字母最多18个，从中间用...省略，保留末尾两个中文字符或4个字母数字。
比如，格式化后的字符串为："哈哈ddd呵呵789...98哈.xls"

Answer 1

// 原始字符串为："哈哈ddd呵呵789哈哈88998哈.xls"
// 要求:'.xls'前面的字符串，最多保留中文字符9个，数字字母最多18个，从中间用...省略，保留末尾两个中文字符或4个字母数字。
// 比如，格式化后的字符串为："哈哈ddd呵呵789...98哈.xls"
// 我的理解为中英文混排不超过18个字符（中文算两个，英文算一个）
// 所以结果为 哈哈ddd呵呵789哈哈...98哈.xls

// 判断是否为中文
function isChinese(temp) {
    var re = /[^\u4E00-\u9FA5]$/;
    if (re.test(temp)) return false;
    return true;
}
var str = "哈哈ddd呵呵789哈哈88998哈.xls"
// 另一种情况 不满18个字符的
// var str = "哈哈ddd呵呵.xls"
var processStrArr = str.split('.')[0].split('')
//     取出前几位
var headerIndex
var header = 0
for (var i=0;i<processStrArr.length;i++) {
    if (header < 18) {
        // 中文字符加2 英文加1
        var num = (isChinese(processStrArr[i]) ? 2 : 1)
        header = header + num
        headerIndex = i
    } else {
        headerIndex = i
        break
    }
}
var headerStr = processStrArr.slice(0, headerIndex).join('')

// 取出剩下的
var nextStrArr = processStrArr.slice(headerIndex)
var footerIndex
var footer = 0
var reverseArr
var lastStr = ''
// 如果有倒着寻找
if (nextStrArr.length) {
    reverseArr = nextStrArr.reverse()
    for (var j=0;j<reverseArr.length;j++) {
        if (footer < 4) {
            var num = (isChinese(reverseArr[j]) ? 2 : 1)
            footer = footer + num
            footerIndex = j
        } else {
            footerIndex = j
            break
        }
    }
    lastStr = '...' + reverseArr.slice(0, footerIndex).reverse().join('')
}
// 最后拼接
var result = headerStr + lastStr + '.' +str.split('.')[1]
console.log(result)
// 哈哈ddd呵呵789哈哈...98哈.xls

你在封装优化一下就好

Answer 2

你的这个存在一些特殊情况的处理：
例如：如果最后四个字符是哈8哈如何取等等

function normalize(str) {
    str = str.split('.')[0];

    var temp = [];
    var sBuffer, bufferSize;
    var result = '';

    for (var i = 0, len = str.length; i < len; i++) {
      //将所有的字符所占的字节数存储为一个数组
        sBuffer = str.charCodeAt(i).toString(2);
        bufferSize = sBuffer.length <= 7 ? 1 : sBuffer.length <= 15 ? 2 : 4;
        temp.push(bufferSize);
    }

    //如果整个字符串长度小于18，直接返回
    if (temp.reduce(function(prev, cur) {
            return prev + cur
        }) < 18) return str;


    var flag1 = true,
        flag2 = true;
    //取前14个字符
    temp.reduce(function(prev, cur, index) {
        if (prev > 14 && flag1) {
            flag1 = false;
            result = str.slice(0, index - 1) + '...';
            return prev;
        } else {
            return prev + cur;
        }
    });
    //取后四个字符
    temp.reduceRight(function(prev, cur, index) {
        if (prev >= 4 && flag2) {
            flag2 = false;
            result += str.slice(index + 1) + '.xml';
            return prev;
        } else {
            return prev + cur;
        }
    });
    return result;
}

Answer 3

我写一个函数,如果有问题请反馈.

https://jsfiddle.net/rzcvjfx6/

Answer 4

自己研究了个方案，纯css实现，支持动态自适应宽度：
纯CSS实现文本中间省略显示并能动态自适应宽度[原创]