I am new to JavaScript and jQuery.
I have a variable named as str in JavaScript and it contains very long text, saying something like
"A quick brown fox jumps over a lazy dog".
I want to wrap it and assign it to the same variable str by inserting the proper \n or br/ tags at the correct places.
I don't want to use CSS etc. Could you please tell me how to do it with a proper function in JavaScript which takes the str and returns the proper formatted text to it?
Something like:
str = somefunction(str, maxchar);
I tried a lot but unfortunately nothing turned up the way I wanted it to be! :(
Any help will be much appreciated...
This should insert a line break at the nearest whitespace of maxChar:
str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It w as popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
str = wordWrap(str, 40);
function wordWrap(str, maxWidth) {
var newLineStr = "\n"; done = false; res = '';
while (str.length > maxWidth) {
found = false;
// Inserts new line at first whitespace of the line
for (i = maxWidth - 1; i >= 0; i--) {
if (testWhite(str.charAt(i))) {
res = res + [str.slice(0, i), newLineStr].join('');
str = str.slice(i + 1);
found = true;
break;
}
}
// Inserts new line at maxWidth position, the word is too long to wrap
if (!found) {
res += [str.slice(0, maxWidth), newLineStr].join('');
str = str.slice(maxWidth);
}
}
return res + str;
}
function testWhite(x) {
var white = new RegExp(/^\s$/);
return white.test(x.charAt(0));
};
Although this question is quite old, many solutions provided so far are more complicated and expensive than necessary, as user2257198 pointed out - This is completely solvable with a short one-line regular expression.
However I found some issues with his solution including: wrapping after the max width rather than before, breaking on chars not explicitly included in the character class and not considering existing newline chars causing the start of paragraphs to be chopped mid-line.
Which led me to write my own solution:
// Static Width (Plain Regex)
const wrap = (s, w) => s.replace(
/(?![^\n]{1,32}$)([^\n]{1,32})\s/g, '$1\n'
);
// Dynamic Width (Build Regex)
const wrap = (s, w) => s.replace(
new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, 'g'), '$1\n'
);
Bonus Features
- Handles any char that's not a newline (e.g code).
- Handles existing newlines properly (e.g paragraphs).
- Prevents pushing spaces onto beginning of newlines.
- Prevents adding unnecessary newline to end of string.
Explanation
The main concept is simply to find contiguous sequences of chars that do not contain new-lines [^\n], up to the desired length, e.g 32 {1,32}. By using negation ^ in the character class it is far more permissive, avoiding missing things like punctuation that would otherwise have to be explicitly added:
str.replace(/([^\n]{1,32})/g, '[$1]\n');
// Matches wrapped in [] to help visualise
"[Lorem ipsum dolor sit amet, cons]
[ectetur adipiscing elit, sed do ]
[eiusmod tempor incididunt ut lab]
[ore et dolore magna aliqua.]
"
So far this only slices the string at exactly 32 chars. It works because it's own newline insertions mark the start of each sequence after the first.
To break on words, a qualifier is needed after the greedy quantifier {1,32} to prevent it from choosing sequences ending in the middle of a word. A word-break char \b can cause spaces at the start of new lines, so a white-space char \s must be used instead. It must also be placed outside the group so it's eaten, to prevent increasing the max width by 1 char:
str.replace(/([^\n]{1,32})\s/g, '[$1]\n');
// Matches wrapped in [] to help visualise
"[Lorem ipsum dolor sit amet,]
[consectetur adipiscing elit, sed]
[do eiusmod tempor incididunt ut]
[labore et dolore magna]
aliqua."
Now it breaks on words before the limit, but the last word and period was not matched in the last sequence because there is no terminating space.
An "or end-of-string" option (\s|$) could be added to the white-space to extend the match, but it would be even better to prevent matching the last line at all because it causes an unnecessary new-line to be inserted at the end. To achieve this a negative look-ahead of exactly the same sequence can be added before, but using an end-of-string char instead of a white-space char:
str.replace(/(?![^\n]{1,32}$)([^\n]{1,32})\s/g, '[$1]\n');
// Matches wrapped in [] to help visualise
"[Lorem ipsum dolor sit amet,]
[consectetur adipiscing elit, sed]
[do eiusmod tempor incididunt ut]
labore et dolore magna aliqua."
Here is a little shorter solution:
var str = "This is a very long line of text that we are going to use in this example to divide it into rows of maximum 40 chars."
var result = stringDivider(str, 40, "<br/>\n");
console.log(result);
function stringDivider(str, width, spaceReplacer) {
if (str.length>width) {
var p=width
for (;p>0 && str[p]!=' ';p--) {
}
if (p>0) {
var left = str.substring(0, p);
var right = str.substring(p+1);
return left + spaceReplacer + stringDivider(right, width, spaceReplacer);
}
}
return str;
}
This function uses recursion to solve the problem.
My variant. It keeps words intact, so it might not always meet the maxChars criterium.
function wrapText(text, maxChars) {
var ret = [];
var words = text.split(/\b/);
var currentLine = '';
var lastWhite = '';
words.forEach(function(d) {
var prev = currentLine;
currentLine += lastWhite + d;
var l = currentLine.length;
if (l > maxChars) {
ret.push(prev.trim());
currentLine = d;
lastWhite = '';
} else {
var m = currentLine.match(/(.*)(\s+)$/);
lastWhite = (m && m.length === 3 && m[2]) || '';
currentLine = (m && m.length === 3 && m[1]) || currentLine;
}
});
if (currentLine) {
ret.push(currentLine.trim());
}
return ret.join("\n");
}
Many behaviours like this can be achieved as a single-liner using regular expressions (using non-greedy quantifiers with a minimum number of matching characters, or greedy quantifiers with a maximum number of characters, depending what behaviour you need).
Below, a non-greedy global replace is shown working within the Node V8 REPL, so you can see the command and the result. However the same should work in a browser.
This pattern searches for at least 10 characters matching a defined group ( \w meaning word characters, \s meaning whitespace characters), and anchors the pattern against a \b word boundary. It then uses a backreference to replace the original match with one having a newline appended (in this case, optionally replacing a space character which is not captured in the bracketed backreference).
> s = "This is a paragraph with several words in it."
'This is a paragraph with several words in it.'
> s.replace(/([\w\s]{10,}?)\s?\b/g, "$1\n")
'This is a \nparagraph \nwith several\nwords in it\n.'
In the original poster's requested format this could look like...
var str = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It w as popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
function wordWrap(text,width){
var re = new RegExp("([\\w\\s]{" + (width - 2) + ",}?\\w)\\s?\\b", "g")
return text.replace(re,"$1\n")
}
> wordWrap(str,40)
'Lorem Ipsum is simply dummy text of the\nprinting and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s\n, when an unknown printer took a galley of\ntype and scrambled it to make a type specimen\nbook. It has survived not only five centuries\n, but also the leap into electronic typesetting\n, remaining essentially unchanged. It w as popularised in the 1960s with the\nrelease of Letraset sheets containing Lorem\nIpsum passages, and more recently with desktop publishing\nsoftware like Aldus PageMaker including\nversions of Lorem Ipsum.'
My version. It returns a array of lines instead of a string as it is more flexible on what line separators you want to use (like newline or html BR).
function wordWrapToStringList (text, maxLength) {
var result = [], line = [];
var length = 0;
text.split(" ").forEach(function(word) {
if ((length + word.length) >= maxLength) {
result.push(line.join(" "));
line = []; length = 0;
}
length += word.length + 1;
line.push(word);
});
if (line.length > 0) {
result.push(line.join(" "));
}
return result;
};
To convert the line array to string to a string:
wordWrapToStringList(textToWrap, 80).join('<br/>');
Please note that it only does word wrap and will not break long words, and it's probably not the fastest.
Here's an extended answer based on javabeangrinder's solution that also wraps text for multi-paragraph input:
function wordWrap(str, width, delimiter) {
// use this on single lines of text only
if (str.length>width) {
var p=width
for (; p > 0 && str[p] != ' '; p--) {
}
if (p > 0) {
var left = str.substring(0, p);
var right = str.substring(p + 1);
return left + delimiter + wordWrap(right, width, delimiter);
}
}
return str;
}
function multiParagraphWordWrap(str, width, delimiter) {
// use this on multi-paragraph lines of text
var arr = str.split(delimiter);
for (var i = 0; i < arr.length; i++) {
if (arr[i].length > width)
arr[i] = wordWrap(arr[i], width, delimiter);
}
return arr.join(delimiter);
}
After looking for the perfect solution using regex and other implementations. I decided to right my own. It is not perfect however worked nice for my case, maybe it does not work properly when you have all your text in Upper case.
function breakTextNicely(text, limit, breakpoints) {
var parts = text.split(' ');
var lines = [];
text = parts[0];
parts.shift();
while (parts.length > 0) {
var newText = `${text} ${parts[0]}`;
if (newText.length > limit) {
lines.push(`${text}\n`);
breakpoints--;
if (breakpoints === 0) {
lines.push(parts.join(' '));
break;
} else {
text = parts[0];
}
} else {
text = newText;
}
parts.shift();
}
if (lines.length === 0) {
return text;
} else {
return lines.join('');
}
}
var mytext = 'this is my long text that you can break into multiple line sizes';
console.log( breakTextNicely(mytext, 20, 3) );function GetWrapedText(text, maxlength) {
var resultText = [""];
var len = text.length;
if (maxlength >= len) {
return text;
}
else {
var totalStrCount = parseInt(len / maxlength);
if (len % maxlength != 0) {
totalStrCount++
}
for (var i = 0; i < totalStrCount; i++) {
if (i == totalStrCount - 1) {
resultText.push(text);
}
else {
var strPiece = text.substring(0, maxlength - 1);
resultText.push(strPiece);
resultText.push("<br>");
text = text.substring(maxlength - 1, text.length);
}
}
}
return resultText.join("");
}
Tired of regexes and hard to read functions? You can wrap texts by using built-in Array methods. Here is a way to do this (just replace the 100 limit by your desired length:
let string = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.';
string.split(' ').map((value, index, array) => {
if (!array.currentLineLength) {array.currentLineLength = 0}
array.currentLineLength += value.length+1;
if (array.currentLineLength > 100) {
array.currentLineLength = value.length;
return "\n" + value;
}
return value;
}).join(' ');
Maybe you would also like to indent this text on each line? No problem you can simply add this after the last join:
.split("\n").map(value => ''.padEnd(20) + value).join("\n");
来源：https://stackoverflow.com/questions/14484787/wrap-text-in-javascript