拆分文本，每隔n个字符添加一个新行，处理空格

Question

Common problem when writing text for alert and confirm dialogs: number of characters to type before adding a newline character. Some browsers auto-break at one point, others at others. So you are left guessing. Useful snippet is a Javascript function that takes as input the alert or confirm dialog's intended text and a char length, then returns the same input string only with new line chars added at the positions with spaces closest to the char length passed in. That way, words are not broken up mid-way.

Example:
1. Assign a var to a string of text you want to use for the alert or confirm dialog box, eg.:
var a = "My dog has fleas the quick brown fox jumps over the lazy dog etc";
2. Run the text through the function, for example:
a = breakLines(a); // Default, break every 50 chars
or
a = breakLines(a, 20); // Break every 20 chars

Display the value of 'a' after running it through the function and you will see line breaks have been added at every place you specified at the space character closest to the character place you specified. For example if you specified 20, 'a' would be converted to the following:

'My dog has fleas\\nthe quick brown fox\\njumps over the lazy\\ndog etc'

For each line in the string (a line is a portion of the string ending in a new line character), the line is trimmed of whitespace on both sides. The code snippet below uses the jQuery $.trim() function to do this but there are other ways to do so without using the jQuery library, such as with regexp. Just modify the code as you want to to use alternate means.

This leads to my question: Aside from doing what I want to do the way I have done it as shown below, is there an easier more compact way of doing it, something that for example can leverage regexp? Any takers?

function breakLines(text, linelength)
{
 var linebreak = '\n';
 var counter = 0;
 var line = '';
 var returntext = '';
 var bMatchFound = false;
 var linelen = 50; // 50 characters per line is default

 if(linelength)
 {
  linelen = linelength;
 }

 if(!text){ return '';}
 if(text.length < linelen+1) { return $.trim(text);}

 while(counter < text.length)
 {
  line = text.substr(counter,linelen);
  bMatchFound = false;
  if (line.length == linelen)
  {
   for(var i=line.length;i > -1;i--)
   {
    if(line.substr(i,1)==' ')
    {
     counter += line.substr(0,i).length;
     line = $.trim(line.substr(0,i)) + linebreak;
     returntext += line;
     bMatchFound = true;
     break;
    }
   }

   if(!bMatchFound)
   {
    counter+=line.length;
    line = $.trim(line) + linebreak;
    returntext += line;
   }
  }
  else
  {
   returntext += $.trim(line);
   break; // We're breaking out of the the while(), not the for()
  }
 }

 return returntext;
}

Answer 1

Maybe ?

function breadLines( str, len )
{
    var len = len || 50, i, j, lines, count, lineBreak = '\n', out = [];

    if ( str.length < len )
        return str;

    lines = str.split(/\s+/);

    for ( i=0, j=0, count=lines.length; i<count; i++ )
    {
        if ( ( out[j] + lines[i] ).length > len )
            j++, out.push("");

        out[j] += lines[i];
    }

    return out.join(lineBreak);
}

Answer 2

Here is a commented solution that uses recursion (23 lines without comments vs 38 for yours):

function explode(text, max) {
    // clean the text
    text = text.replace(/  +/g, " ").replace(/^ /, "").replace(/ $/, "");
    // return empty string if text is undefined
    if (typeof text === "undefined") return "";
    // if max hasn't been defined, max = 50
    if (typeof max === "undefined") max = 50;
    // return the initial text if already less than max
    if (text.length <= max) return text;
    // get the first part of the text
    var exploded = text.substring(0, max);
    // get the next part of the text
    text = text.substring(max);
    // if next part doesn't start with a space
    if (text.charAt(0) !== " ") {
        // while the first part doesn't end with a space && the first part still has at least one char
        while (exploded.charAt(exploded.length - 1) !== " " && exploded.length > 0) {
            // add the last char of the first part at the beginning of the next part
            text = exploded.charAt(exploded.length - 1) + text;
            // remove the last char of the first part
            exploded = exploded.substring(0, exploded.length - 1);
        }
        // if the first part has been emptied (case of a text bigger than max without any space)
        if (exploded.length == 0) {
            // re-explode the text without caring about spaces
            exploded = text.substring(0, max);
            text = text.substring(max);
        // if the first part isn't empty
        } else {
            // remove the last char of the first part, because it's a space
            exploded = exploded.substring(0, exploded.length - 1);
        }
    // if the next part starts with a space
    } else {
        // remove the first char of the next part
        text = text.substring(1);
    }
    // return the first part and the exploded next part, concatenated by \n
    return exploded + "\n" + explode(text);
}

Call:

var text = "               My dog has    fleas the quick brown fox jumps over the lazy dog etc";
var exploded = explode(text);
console.log(exploded);

Prints:

My dog has fleas the quick brown fox jumps over

the lazy dog etc

Answer 3

Short version with no params validation

function explode(str, maxLength) {
    var buff = "";
    var numOfLines = Math.floor(str.length/maxLength);
    for(var i = 0; i<numOfLines+1; i++) {
        buff += str.substr(i*maxLength, maxLength); if(i !== numOfLines) { buff += "\n"; }
    }
    return buff;
}

Answer 4

This should do it:

function breaklines(str, n) {
    var lines = str.split(/\s+/), // explode on whitespaces
        n = +n || 50;
    var res = [];
    for (var i=0; i<lines.length; ) {
        for (var l = 0, line = []; l + lines[i].length <= n; i++) {
            l += 1 + lines[i].length;
            line.push(lines[i]);
        }
        res.push(line.join(" "));
    }
    return res.join("\n");
}

Answer 5

This function is recursive and a lot more simple. It also deals with newlines already being in the text. It's short and without loops.

function explode (text, max) {
        if (text == null) return '';
    if (text.length <= max) return text;
    const nextNewLine = /\n/.exec(text);

    const lineLength = nextNewLine ? nextNewLine.index: text.length;
    if (lineLength <=  max) {
        const line = text.substr(0, lineLength);
        const rest = text.substr(lineLength+1);
        return line + '\n'+  explode(rest, max);
    } else {
        let line = text.substr(0, max);
        let rest = text.substr(max);

        const res = (/([\s])[^\s]*$/.exec(line));
        if(res){ //
            line = text.substr(0, res.index);
            rest = text.substr(res.index+1);
        } else {
            line = line + "-";
        }
        return line + '\n'+  explode(rest, max);
    }
}