按中文字符的长度来匹配,超出部分省略号显示

2017/06/08 javascript

前端显示中,经常会遇见很长一段的字符需要在一行中显示的需求,字符串中包含汉字和英文两种,为了显示更加美观,
超出部分常用的处理方式就是按照规定的长度,超出部分省略号显示。

为了实现这个效果,常用的方法有4种。

js 的 slice方法

function (str, limitLength) {
  str = strm.trim();
  limitLength = limitLength || 5;
  var result = '';
  if (str.length < limitLength) {
    return str;
  }
  result = str.slice(0, limitLength)+'...';
  return result;
}


// 使用示例

var str = 'javascript is best language!';
var newStr = ellisis(str, 8);     // javascri...


str = '成都是个美丽的地方!';
newStr = ellipsis(str, 8);       // 成都是个美丽的地...

简单正则替换

var str = 'javascript is best language!';
var newStr = str.replace(/(.{8})(.*)/,'$1...');        // javascri...

str = '成都是个美丽的地方!';
newStr = str.replace(/(.{8})(.*)/,'$1...');            // 成都是个美丽的地...

同样都是截取8个,但是

javascri...
成都是个美丽的地...   

它们看起来真的一样长吗?如果是在按钮中显示,或者是列表显示,看起来可能就会特别奇怪。

为了解决这个问题,方便开发者开发。

css3 ellipsis

<style>
.ellipsis {
  width:240px;
  text-overflow:ellipsis;
  -o-text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
  -moz-text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;
}
</style>

// 使用示例

<div class="ellipsis">慌慌张张,匆匆忙忙,为何生活总是这样</div>
<div class="ellipsis">难道说我的理想,就是这样度过一生的时光</div>
<div class="ellipsis">不卑不亢,不慌不忙,也许生活应该这样</div>
<div class="ellipsis">Push being made for new momentum in AI progress</div>

// 最后显示的结果为:

慌慌张张,匆匆忙忙,为...
难道说我的理想,就是这...
不卑不亢,不慌不忙,也...
Push being made for...

很好,这就是我们想要的效果。

等一下,IE8及其以前怎么办,老师说css3有的属性不兼容IE8呀。

还没高兴多久呢,好尴尬~~~

searching…

正则匹配中文字符

当当当当,正则哥哥出来了。    正则表达式 /[^\x00-\xff]/ 可以匹配中文字符。    一个中文占两个字节,一个英文占一个字节。    方法如下。

/**
 * 省略号
 * @param  {[type]}  str            [被截取的字符串]
 * @param  {Number}  [length=5]     [需要被截取的中文字的长度  ps: 中文占2个字符,英文占1个字符]
 * @param {boolean} ellipsisChinese [截取的是中文字符的长度还是英文]
 * @return {Boolean}                [如果被截取的字符串小于需要显示省略号的长度,就直接返回。超过需要显示省略号的长度的,超出部分省略号显示]
 */
function ellipsis(str, length, ellipsisChinese) {
  length = length || 5;
  ellipsisChinese = ellipsisChinese || true;
  var newLength = ellipsisChinese ? length * 2 : length;
  var newStr = '';
  str = str.trim();
  if (str === '') return str;
  for (var i = 0;i< str.length; i++) {
    const isChinese = /[^\x00-\xff]/.test(str.charAt(i));
    if (isChinese){
        newLength -= 2;
    } else {
        newLength -= 1;
    }
    if (newLength >= 0) {
        newStr += str.charAt(i);
    } else {
      return newStr+'...';
    }
  }
  return newStr;
}

// 使用示例

html
<div class="ellipsis">慌慌张张,匆匆忙忙为何生活总是这样</div>
<div class="ellipsis">难道说我的理想,就是这样度过一生的时光</div>
<div class="ellipsis">不卑不亢,不慌不忙也许生活应该这样</div>
<div class="ellipsis">Push being made for new momentum in AI progress</div>

// js 偷一下懒,用jquery实现一下   

$('.ellipsis').forEach(function(){
  var ellipsisText = ellipsis($(this.text(), 10);
  $(this).text(ellipsisText);
});

// 最后结果

<div class="ellipsis">慌慌张张,匆匆忙忙为...</div>
<div class="ellipsis">难道说我的理想,就是...</div>
<div class="ellipsis">不卑不亢,不慌不忙也...</div>
<div class="ellipsis">Push being made for ...</div>

搜索

    目录

    更多最新信息,欢迎关注公众号

    👇🏻

    公众号二维码
    扫码关注「前端知识总结」公众号