字符串根据字节长度进行截取并展示选中效果——js字符串获取字节长度

最新推荐文章于 2023-05-18 09:21:21 发布

叶浩成520

最新推荐文章于 2023-05-18 09:21:21 发布

阅读量826

点赞数

分类专栏： js必会知识点 vue基础知识文章标签： js js技能提升

本文链接：https://blog.csdn.net/yehaocheng520/article/details/117076310

版权

js必会知识点同时被 2 个专栏收录

212 篇文章 23 订阅

订阅专栏

vue基础知识

140 篇文章 20 订阅

订阅专栏

应用场景：分类部分有很多子类，点击“分类”时，有选中状态，选中效果如下：
由于内容分类名称可能会很长，就需要进行…展示，
在这里插入图片描述
模拟页面大致排版，
效果图如下：

可以看到上图中当分类名称太长时，会导致内容截断，选中的效果图也会有截断的情况，不是很美观
代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style scoped>
        * {
            margin: 0;
            padding: 0;
        }
        
        .classify {
            display: flex;
            border: 1px solid #999;
        }
        
        .title {
            width: 100px;
            height: 80px;
            border-right: 1px solid #999;
            text-align: center;
            line-height: 80px;
            flex-shrink: 0;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            padding: 0 6px;
            box-sizing: border-box;
        }
        
        .content div {
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .content div span.active {
            color: #fff;
            border: 1px solid #fdb13e;
            background: #f895008f;
            border-radius: 4px;
            padding: 0 6px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="classify">
        <div class="title">分类</div>
        <div class="content">
            <div><span class="active">传感器，变送器</span></span>
            </div>
            <div><span>传感器，变送器</span></span>
            </div>
            <div><span>光学检测设备</span></span>
            </div>
            <div><span>分立半导体产品</span></span>
            </div>
            <div><span>电容器</span></span>
            </div>
            <div><span>电阻器</span></span>
            </div>
            <div><span>线路保护，配电，后端线子</span></span>
            </div>
            <div><span>继电器</span></span>
            </div>
            <div><span>连接器，互连器件</span></span>
            </div>
            <div><span>集成电路（IC）</span></span>
            </div>
            <div><span>音频产品</span></span>
            </div>
            <div><span>其他</span></span>
            </div>
            <div><span class="active">嵌入式手机电视机嵌入式标签机</span></span>
            </div>
            <div><span class="active">STMicroelectronics</span></span>
            </div>
</body>

</html>

为了能够让选中的分类标签能够边框显示完整，则需要对分类标签进行处理：
在这里插入图片描述
考虑到的解决方法就是：
通过判断分类名称字符串的字符长度，如果长度超过一定数值(比如18个字节)，则需要自动截取前18个字节并加上…展示

要实现上面的效果，则需要注意以下几点：
1.汉字和英文字母占据的空间不一样
汉字占2个字节，英文字母占1个字节，不能一概而论的将18认为汉字或者英文字母，应该是18个字节：
2.当字符串的字节长度超过一定数值时，需要截取

判断字符串字节长度的方法

 String.prototype.gblen = function () {
    var len = 0;
    for (var i = 0; i < this.length; i++) {
        if (this.charCodeAt(i) > 127 || this.charCodeAt(i) == 94) {
            len += 2;
        } else {
            len++;
        }
    }
    return len;
};

<span  v-if="brandName.gblen()>18">{{brandName | filterStr}}</span>
<span  v-else>{{brandName}}</span>

截取字符串的过滤方法（vue版本）

filterStr(str) {
   var realLength = 0, len = str.length, charCode = -1,subNum=0;
   for (var i = 0; i < len; i++) {
       charCode = str.charCodeAt(i);
       if (charCode >= 0 && charCode <= 128) realLength += 1;
       else realLength += 2;
       if (realLength > 18) {
           return str.substring(0, i)+"...";
       }
   }
}

感悟：
其实两部分可以整合在一起，直接用后面的过滤方法即可：修改过滤方法如下：

filterStr(str) {
   var realLength = 0, len = str.length, charCode = -1,subNum=0;
   for (var i = 0; i < len; i++) {
       charCode = str.charCodeAt(i);
       if (charCode >= 0 && charCode <= 128) realLength += 1;
       else realLength += 2;
       //如果字符串的字节长度超过限制，则返回截取后的字符串
       if (realLength > 18) {
           return str.substring(0, i)+"...";
       }
   }
   //如果进行到这一步，则表示字符串长度没有超过限制，则直接将字符串返回
   return str;
}