格式化字符串,截断给定的长文本,控制每行的长度和展示的行数,并添加一个后缀
css 可以实现内容超出时折行和超出隐藏,配合line-clamp也可以指定显示行数,但是在一些图表或者其他无法添加html标签的场景下就不能使用,如一些echart和g6的Graph中就不太好用css样式去设置文字折行。
一个方法就是可定义一个函数指定每行最大长度,最多显示行数,格式化文本内容。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // 截断长文本。length 为每行长度,row 为展示行数,elipsis 是后缀 export const formatText = (text: string, length = 6, row = 2, elipsis = '...' ) => { if (!text) return '' ; if (text.length > length) { const regexp = new RegExp(`(.{${length}})`, 'g' ); const arr: string[] = text.replace(regexp, '$1\n' ).split( '\n' ); if (arr.length > row) { const s: string = arr[row - 1]; arr[row - 1] = `${s.slice(0, length - 2)}${elipsis}`; return arr.splice(0, row).join( '\n' ); } return arr.join( '\n' ); } return text; }; |
以下是尝试用ai生成的解释
这段TypeScript代码定义了一个名为formatText
的函数,用于截断给定的长文本,控制每行的长度和展示的行数,并添加一个后缀(elipsis)。
具体解释如下:
-
text: string, length = 6, row = 2, elipsis = '...'
:这是函数的签名,定义了四个参数:text
:需要截断的文本,类型为字符串。length
:每行的最大长度,类型为数字,默认值为6。row
:展示的最大行数,类型为数字,默认值为2。elipsis
:用作文本截断后缀的字符串,默认值为'...'。
-
if (!text) return '';
:如果输入的文本为空,则函数返回空字符串。 -
if (text.length > length)
:如果文本的总长度大于每行的长度,执行以下操作:- 创建一个正则表达式对象,以捕获每
length
个字符。 - 使用正则表达式替换文本中的每一行,并在每一行后添加一个换行符('\n')。
- 将处理后的文本分割为数组,每行一个元素。
- 创建一个正则表达式对象,以捕获每
-
if (arr.length > row)
:如果数组的长度大于需要展示的行数,执行以下操作:- 取第
row - 1
行(从0开始计数)。 - 从该行中截取前
length - 2
个字符,并添加后缀elipsis
。 - 用新的字符串替换原始数组中的那一行。
- 取第
-
return arr.splice(0, row).join('\n');
:删除数组的前row
行,并将剩余的行连接为字符串并返回。 -
return text;
:如果文本的总长度不大于每行的长度,直接返回原始文本。
这个函数的主要作用是控制长文本的显示,例如在UI组件或页面中限制长文本的显示行数和每行的字符数。
这里ai理解错误, 应该截取前row行然后拼接'\n'返回.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通