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字..."作者最新文章
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比:灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object:数组类型检测误区解析
2026-11-04 19:50:47
