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

Love The Way You Lie 2021-09-07 20:30 768阅读 0赞

应用场景：分类部分有很多子类，点击“分类”时，有选中状态，选中效果如下：  
由于内容分类名称可能会很长，就需要进行…展示，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
模拟页面大致排版，  
效果图如下：  
![在这里插入图片描述][20210520151303154.png]  
可以看到上图中当分类名称太长时，会导致内容截断，选中的效果图也会有截断的情况，不是很美观  
代码如下：

<!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>

为了能够让选中的分类标签能够边框显示完整，则需要对分类标签进行处理：  
![在这里插入图片描述][20210520151409447.png]  
考虑到的解决方法就是：  
通过判断分类名称字符串的字符长度，如果长度超过一定数值(比如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)+"...";
           }
       }
       //如果进行到这一步，则表示字符串长度没有超过限制，则直接将字符串返回
       return str;
    }

附录：  
[字符串获取字节长度的几种方法：https://blog.csdn.net/testcs\_dn/article/details/21412303][https_blog.csdn.net_testcs_dn_article_details_21412303]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/dd1b2c71cc8049459c75651a45c4053f.png
[20210520151303154.png]: /images/20210725/436e4c9e541946c4b88286ae8770a21e.png
[20210520151409447.png]: /images/20210725/b72dfe489d934dac88474cfb344e06f4.png
[https_blog.csdn.net_testcs_dn_article_details_21412303]: https://blog.csdn.net/testcs_dn/article/details/21412303