JavaScript按字节截取字符串并添加省略号的实现方法

作者:木棉时间:2026-10-27 17:57:19浏览:446

本文介绍如何在JavaScript中按字节长度截取字符串,自动处理全角与半角字符,并在截断处添加省略号。通过cutString和autoAddEllipsis函数实现精确控制,适用于前端文本溢出处理场景。

JS按字节截取字符串并添加省略号的实现方法

处理过长字符串时,需截取指定长度并追加省略号。注意区分半角字符(长度为1)与全角字符(长度为2)。参数pStr代表源字符串,pLen代表目标截取长度。函数返回处理后的字符串。

核心逻辑代码如下:

function autoAddEllipsis(pStr, pLen) {
 
var _ret = cutString(pStr, pLen);
var _cutFlag = _ret.cutflag;
var _cutStringn = _ret.cutstring;
 
if ("1" == _cutFlag) {
return _cutStringn + "...";
} else {
return _cutStringn;
    }
}

*

获取指定字节长度的字符串内容。


注意:半角字符计为1字节,全角字符计为2字节。


 *

参数pStr:待处理的字符串。


参数pLen:期望的字节长度。


 *

返回值:截取后的字符串对象。


 *

实现代码如下:

function cutString(pStr, pLen) {
 
// 获取原字符串的字符数量
var _strLen = pStr.length;
 
var _tmpCode;
 
var _cutString;
 
// 默认情况下,若发生截断,返回标志为"1"
var _cutFlag = "1";
 
var _lenCount = 0;
 
var _ret = false;
 
if (_strLen <= pLen/2) {
_cutString = pStr;
_ret = true;
    }
if (!_ret) {
for (var i = 0; i < _strLen ; i++ ) {
if (isFull(pStr.charAt(i))) {
_lenCount += 2;
} else {
_lenCount += 1;
            }
if (_lenCount > pLen) {
_cutString = pStr.substring(0, i);
_ret = true;
break;
} else if (_lenCount == pLen) {
_cutString = pStr.substring(0, i + 1);
_ret = true;
break;
            }
        }
    }
if (!_ret) {
_cutString = pStr;
_ret = true;
    }
if (_cutString.length == _strLen) {
_cutFlag = "0";
    }
return {"cutstring":_cutString, "cutflag":_cutFlag};
}

*

判断字符是否为全角字符。


 *

参数pChar:长度为1的字符串。


返回值:若为全角返回true,否则返回false。


半角字符返回false。


 *

代码实现如下:

function isFull (pChar) {
for (var i = 0; i < pChar.strLen ; i++ ) {
if ((pChar.charCodeAt(i) > 128)) {
return true;
} else {
return false;
    }
}
}

测试用例展示:


测试代码如下:

testStr = "测试1字符串";
autoAddEllipsis(testStr, 1); // 输出 "测..."
autoAddEllipsis(testStr, 2); // 输出 "测..."
autoAddEllipsis(testStr, 3); // 输出 "测..."
autoAddEllipsis(testStr, 4); // 输出 "测试..."
autoAddEllipsis(testStr, 5); // 输出 "测试1..."
autoAddEllipsis(testStr, 6); // 输出 "测试1..."
autoAddEllipsis(testStr, 7); // 输出 "测试1字..."
作者最新文章