JavaScript と jQuery は初めてです。
JavaScript のように名前が付けられた変数があり、str次のような非常に長いテキストが含まれています。
"A quick brown fox jumps over a lazy dog".
適切な場所に適切なまたはタグをstr挿入して、ラップして同じ変数に割り当てたいと思います。\nbr/
CSS などを使用したくありません。 JavaScript の適切な関数を使用してstr、適切な書式設定されたテキストを受け取り、返す方法を教えてください。
何かのようなもの：
str = somefunction(str, maxchar);
いろいろ試してみましたが、残念ながら思い通りにはなりませんでした！:(
どんな助けでも大歓迎です...
これにより、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/>');
単語の折り返しのみを行い、長い単語を分割しないことに注意してください。おそらく最速ではありません。
このような多くの動作は、正規表現を使用してシングルライナーとして実現できます (必要な動作に応じて、最小数の一致する文字を持つ貪欲でない量指定子、または最大数の文字を持つ貪欲な量指定子を使用します)。
以下では、ノード V8 REPL 内で機能する非貪欲なグローバル置換が示されているため、コマンドと結果を確認できます。ただし、ブラウザでも同じことが機能するはずです。
このパターンは、定義されたグループ ( \w は単語文字を意味し、\s は空白文字を意味します) に一致する少なくとも 10 文字を検索し、\b 単語境界に対してパターンを固定します。次に、後方参照を使用して、元の一致を改行が追加されたものに置き換えます (この場合、括弧で囲まれた後方参照でキャプチャされていないスペース文字をオプションで置き換えます)。
> 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.'
私の変種。単語はそのまま保持されるため、常に maxChars 基準を満たすとは限りません。
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 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("");
}
私は非常に遅れていることを知っていますが、コメント/改善のためにコードを共有したかっただけです. コードを学び即興で作るのはいつでも楽しいものです。
var text = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).";
function WordWrap(text, maxLength){
if(!text) return 'Please provide text';
const strWords = text.split(' ');
let tempWord = '';
let lineLength = 0;
return strWords.reduce((acc, word) => {
lineLength += word.length;
if(lineLength > maxLength){
lineLength = 0;
tempWord = word;
return `${acc} <br />`
} else {
const withTempWord = `${acc} ${tempWord} ${word}`;
tempWord = '';
return withTempWord;
}
}, '');
};
document.write(WordWrap(text, 14));