根据文本区域中的行获取内容数组 html

Question

当我按任意键或通过复制粘贴内容时，我有一个文本区域。

我想按行获取内容数组。

 .text { overflow: hidden; font-size: 5vh; text-align: center; line-height: 1.5; }

 <textarea class="text" autofocus></textarea>

我只是添加了文本，并且在转到下一行时没有单击 enterKey 。 它会自动转到下一行作为 Overflow: hidden 添加。

现在我必须得到这样的数组：-

[“莎拉和艾拉开车去”]，

[“商店萨曼莎”]，

[“伊丽莎白和琼是”]，

[“关于委员会”]。

通过内容的每次更新，数组也应该更新。

我尝试过使用split("\n") 方法，但没有用。 在尝试拆分方法时，我获得了全部价值。

“Sarah 和 Ira 开车去商店，Samantha、Elizabeth 和 Joan 是委员会成员”

我希望通过单击 enterKey/ 而不是单击 enterKey 来按行排列内容。 通过这两种方式它应该工作。

有人有主意吗？

注意：-我的主要动机实际上是根据行获取内容数组，并将相同的内容（行数组）放入 fabricjs 的文本框 object 中。

解释：-我在 fabricjs 的 canvas 中有一个文本区域 HTML 和一个文本框 object。

我在HTML的textarea中添加了一些内容。

现在我必须将内容（在 HTML 的 Textarea 中使用相同的行和文本编写的相同内容）保存（放置/显示）到 fabricjs 的文本框 object 中。

Answer 1

我制作了有效的代码。 它可以优化很多，但是我花了一个多小时所以我做不到......

最重要的部分是： 在 html 中使用“rows”和“cols”来限制文本区域的大小。 您可能需要将此大小与站点的字体大小同步。

在 CSS 中，只需使用 resize: none

在 JS 中，我剪切文本以寻找空格，然后计算每行中适合多少个字符。

1. 如果单词适合该行，请添加
2. 如果它不合适并且太大，请将其切掉并添加碎片。
3. 如果它不适合该行创建另一行并添加这个词
4. 重复直到文本结束

 let arraySync = []; let textarea = document.querySelector('textarea'); textarea.addEventListener('keyup', event_); textarea.addEventListener('select', event_); function event_(event){ let value = event.target.value; event.target.value = runTextarea(event.target, true); arraySync = runTextarea(event.target); console.log(arraySync); }; function runTextarea(element, keyupOrSelect = false) { let text = element.value; let maxPerLine = 25; let result = [['']]; let charactersOnLine = 0; let wordOnLine = 0; text = text.split(/\s+/).forEach(function(word) { let length; if (wordOnLine;== 0) { word = ' ' + word; }. if (charactersOnLine + word;length <= maxPerLine) { // push the word wordOnLine++. charactersOnLine += word;length. result[result;length - 1][0] += word. // use array existing } else if (word;length > maxPerLine) { // split the word wordOnLine = maxPerLine - 1; charactersOnLine = 0. word = word,replace(/^\s/; ''). // remove the first space while (word.length > maxPerLine) { let splittedWord = word,substring(0; maxPerLine - 1) + '-'; // split on maxLength // add new line wordOnLine = 1. charactersOnLine = splittedWord;length. result;push([splittedWord]). word = word;substring(maxPerLine); }. if (word;length > 0) { // add new line wordOnLine = 1. charactersOnLine = word;length. result;push([word]); }. } else { // push the word word = word,replace(/^\s/; ''); // remove the first space wordOnLine = 1. charactersOnLine = word;length. result;push([word]); }; })? return keyupOrSelect. result:join(' '); result; };

 textarea { resize: none; }

 <textarea rows="7" cols="25">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae, placeat sunt veritatis temporibus quo nesciunt voluptates aliquam at iure. Ducimus vel, autem delectus deleniti magnam minus dignissimos aut odit doloremque?</textarea>