格式化字符串,截断给定的长文本,控制每行的长度和展示的行数,并添加一个后缀

发布时间 2023-09-11 18:06:19作者: anin

css 可以实现内容超出时折行和超出隐藏,配合line-clamp也可以指定显示行数,但是在一些图表或者其他无法添加html标签的场景下就不能使用,如一些echart和g6的Graph中就不太好用css样式去设置文字折行。

一个方法就是可定义一个函数指定每行最大长度,最多显示行数,格式化文本内容。

// 截断长文本。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)。

具体解释如下:

  1. text: string, length = 6, row = 2, elipsis = '...':这是函数的签名,定义了四个参数:

    • text:需要截断的文本,类型为字符串。
    • length:每行的最大长度,类型为数字,默认值为6。
    • row:展示的最大行数,类型为数字,默认值为2。
    • elipsis:用作文本截断后缀的字符串,默认值为'...'。
  2. if (!text) return '';:如果输入的文本为空,则函数返回空字符串。

  3. if (text.length > length):如果文本的总长度大于每行的长度,执行以下操作:

    • 创建一个正则表达式对象,以捕获每length个字符。
    • 使用正则表达式替换文本中的每一行,并在每一行后添加一个换行符('\n')。
    • 将处理后的文本分割为数组,每行一个元素。
  4. if (arr.length > row):如果数组的长度大于需要展示的行数,执行以下操作:

    • 取第row - 1行(从0开始计数)。
    • 从该行中截取前length - 2个字符,并添加后缀elipsis
    • 用新的字符串替换原始数组中的那一行。
  5. return arr.splice(0, row).join('\n');:删除数组的前row行,并将剩余的行连接为字符串并返回。

  6. return text;:如果文本的总长度不大于每行的长度,直接返回原始文本。

这个函数的主要作用是控制长文本的显示,例如在UI组件或页面中限制长文本的显示行数和每行的字符数。