Get array of content as per rows in textarea html

Question

I have a textarea, when I press any key or by copy-pasting the content.

I wanted to get the array of content as per rows.

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

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

I have simply added the text and I am Not clicking enterKey while going to next line . It automatically goes to next line as Overflow: hidden is added.

Now I must get the array like this:-

["Sarah and Ira drove to "],

["the store Samantha, "],

["Elizabeth, and Joan are "],

["on the committees"].

By every update in content, the array should be updated too.

I have tried with split("\n") approach , it didn't worked. while trying Split approach, I am getting full value.

"Sarah and Ira drove to the store Samantha, Elizabeth, and Joan are on the committees"

I wanted the array of content as per rows with clicking enterKey/ without clicking enterKey . By both ways it should work .

Anyone have any ideas?

Note:- My main motive is actually get the array of content as per rows and put the same content(array of rows) in textbox object of fabricjs.

Explaining:- I have a Textarea of HTML and a textbox object in canvas of fabricjs.

I have added some content in textarea of HTML.

Now I have to save(put/show) that content(Same content written in Textarea of HTML with same rows and text) into textbox object of fabricjs.

Answer 1

I made code that works. It can be optimized a lot, but it took me over an hour so I couldn't do it...

The most important parts are: In html use "rows" and "cols" to limit the size of the textarea. You may need to synchronize this size with the site's font-size.

In CSS just use resize: none

In JS I cut the text looking for spaces and then calculate how many characters fit in each of the lines.

1. If the word fits on the line, add
2. If it doesn't fit and is too big, cut it out and add the fragments.
3. If it doesn't fit on the line create another line and add this word
4. repeat until the text ends

 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>