我是JavaScript和jQuery的新手。
我在JavaScript中有一个名为str的变量，它包含了一段非常长的文本，大概是这样的：
"A quick brown fox jumps over a lazy dog".
str，在正确的位置插入适当的\n或br/标签。str参数并返回格式正确的文本。str = somefunction(str, maxchar);
虽然这个问题很旧了，但迄今为止提供的许多解决方案比必要的更为复杂和昂贵，正如user2257198所指出的 - 这完全可以使用短小的一行正则表达式来解决。
然而，我发现他的解决方案存在一些问题，包括：在最大宽度之后而不是之前进行换行，打破明确未包含在字符类中的字符，并且没有考虑现有的换行符导致段落的开头被截断。
这促使我编写了自己的解决方案：
// Static Width (Plain Regex)
const wrap = (s) => 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'
);
主要思路是查找连续的字符序列，这些序列不包含换行符[^\n]，长度最多为所需长度，例如32 {1,32}。通过在字符类中使用否定^，它更加宽容，避免了需要显式添加标点等内容的问题：
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.]
"
到目前为止，这个函数只能确切地在32个字符处进行分割。它之所以有效，是因为它自己的换行插入标记了第一个序列后每个序列的起点。
要按单词进行分割，需要在贪婪量化符号 {1,32} 后加上限定符，以防止其选择在单词中间结束的序列。单词边界字符 \b 可能会导致新行开头的空格，因此必须使用空白字符 \s。它还必须放置在组外，以便消耗它，以防止增加最大宽度 1 个字符：
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."
现在它会在达到限制之前中断单词，但最后一个单词和句号没有在最后的序列中匹配，因为没有终止空格。
可以在空格中添加“或字符串结尾”选项(\s|$)以扩展匹配，但最好完全防止匹配最后一行，因为这会导致在结尾插入不必要的新行。为了实现这一点，可以在之前添加完全相同序列的负向先行断言，但使用字符串结尾字符而不是空格字符：
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."
const wrap = function (s, w) {
var wrapped = s.replace(new RegExp(`(?![^\\n]{1,${w}}$)(([^\\n]{1,${w}}-)|([^\n]{1,${w}})(?:\\s))`, 'g'), '$1\n');
return wrapped.replace(new RegExp('(?!-$)(-)', 'gm'), '');
} - naskew这应该在最接近 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));
};
这里有一个更短的解决方案：
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;
}
这个函数使用递归来解决问题。
我的版本会返回一组行，而不是字符串，因为这样更灵活，可以选择要使用哪种换行符（如换行符或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;
};
wordWrapToStringList(textToWrap, 80).join('<br/>');
> 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.'
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.'
我的变体。它保留单词的完整性，因此可能不总是符合最大字符标准。
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");
}
在使用正则表达式和其他实现寻找完美解决方案后，我决定自己编写。它并不完美，但对我的情况起了很好的作用，也许当您的所有文本都是大写时它无法正常工作。
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) );这是javabeangrinder解决方案的扩展答案，也适用于多段落输入的文本包装：
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);
}
代码
function wrap (input: string, { limit = 80, breaks = '\n', join = true } = {}) {
const lexed: string[] = []
const regex: RegExp = /[\t\v\r \u00a0\u2000-\u200b\u2028-\u2029\u3000]/g;
const words: string[] = input.trim().replace(regex, ' ').split(' ').concat('\n');
for (let i = 0, s = 0, w = 0, l = words.length; i < l; i++) {
if (words[i] === '\n' && i + 1 !== l) {
lexed.push(words[i])
} else {
w += words[i].length + 1;
if (w > limit || (i + 1 === l)) {
lexed.push(join
? words.slice(s, i).join(' ')
: words.slice(s, i).join(' ') + breaks
);
s = i;
w = 0;
}
}
}
return join ? lexed.join(breaks) : lexed;
}
使用方法
wrap('add your long string to wrap', {
limit: 80, // wrap limit
breaks: '\n', // newline characters
join: true // Whether or not to join or return array
})
故障
以下是主要要点：
foo bar > foo barstring[]）\n或<br>等除了@Ross Rogers和@ieeehh的回答之外。 你代码中的变量“done”被用作“found”。只是想提醒其他人不要混淆。
n个字符后换行吗？ - David Thomas