首页/ 填坑/ 文章详情

Javascript 递归截取字符串,自动换行

开发前提:生成打印HTML模版时,原本限制元素的宽度,从而使字符串自动换行。奈何打印HTML模版style样式在打印预览不生效,药石无灵,退而求其次,使用Javasctipt手动截取字符串换行。

字符串长度未知,元素的宽度已固定,可知一行可以存放多少个字符。这种情况下,首推递归回调方法:将字符串载取之后,剩余的字符串继续载取,直到没有

JS/**
 * 截取字符
 * @method cutString
 * @param {String} str 截取字符
 * @param {String} limit 截取字符数
 * @return {Object}
 */
var substring = function (str,limit) {
    var limit = limit || 30;
    var total = str.length;
    if(total > limit) {
        return { value: str.substring(0,limit), remain: str.substring(limit,total)}
    } else {
        return { value: str, remain: ''}
    }
}

/**
 * 截取字符回调函数
 * @method cutStringCallback
 * @param {String} str 截取字符
 * @param {String} value 截取之后的字符
 * @param {String} limit 截取字符数
 * @return {String}
 */
var cutStringCallback = function (str,value,limit) {
    var result = substring(str,limit);
    
    if(result.remain == '') {
        value = value + result.value
    } else {
        value += result.value+'<br/>';
        value = cutStringCallback(result.remain,value,limit);
    }

    return value
}

console.log(cutStringCallback('我们有一个美好的未来','',2));

使用lenght总计字符串时,不管中文、英文或数字均以一个字符长度表示,纯英文或纯数字会比纯中文的短,为此限制字符需要预留点空白位,效果没有style样式控制的好也是这个原因。

文章评论0 records

最新 最早

0

最新评论Latest comments

凡心的仙人凡心的仙人 03-18 14:35
谢谢你了!
rantrismrantrism 2023-04-03 11:27
您好~我是腾讯云开发者社区运营,关注了您分享的技术文章,觉得内容很棒,我们诚挚邀请您加入腾讯云自媒体分享计划。完整福利和申请地址请见:https://cloud.tencent.com/developer/support-plan 作者申
唐牛才是食神唐牛才是食神 2022-06-15 10:51
(*°▽°*)八(*°▽°*)♪,解决了
唐牛才是食神唐牛才是食神 2022-06-15 10:49
发现不得了的东西,今晚回去好好研究下...
胖螺胖螺 2022-02-04 00:58
( ゜- ゜)つロ 在写了在写了。看到也有些感慨。因为站长前年在我原博客的留言,让我毅然选择去深造,选择读研,曾经我想过挺多东西的,还是自己本专业的适合我自己。在这先表达感谢。新年快乐!