首页/ 填坑/ 文章详情

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

big2catbig2cat 08-27 16:11
然而没什么用,smartpss不兼容老录像机,就算能看回放,很多时间点在回放里也看不到
HentaiCatHentaiCat 2020-12-30 10:22
考科目二全程很紧张,考了三次才过,有次侧方入库直接pass,100分扣完,呜呜呜~
猫猫酱猫猫酱 2020-11-12 10:56
一入多肉深似海,说多都是泪
soulkunsoulkun 2020-11-05 15:54
IconFont的图标真的很好用!!!
无限链霉球菌无限链霉球菌 2020-11-03 11:41
药店,了解一下(`・ω・´)