根据textarea html中的行获取内容数组

发布于 2025-02-07 07:16:14 字数 1331 浏览 2 评论 0原文

当我按任何键或复制内容时,我有一个文本方面。

我想根据行获得一系列内容。

.text {
  overflow: hidden;
  font-size: 5vh;
  text-align: center;
  line-height: 1.5;
}
<textarea class="text" autofocus></textarea>

我只是添加了文本,我在进入下一行时不要单击EnterKey。 随着溢出:添加隐藏,它会自动进入下一行。

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

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

[“萨曼莎商店”,“],

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

[“在委员会上”]。

通过内容中的每个更新,也应更新数组。

我尝试使用 split(“ \ n”)方法,它没有起作用。 在尝试拆分方法时,我将获得全部价值。

“莎拉(Sarah)和艾拉(Ira)开车去了萨曼莎(Samantha),伊丽莎白(Elizabeth)和琼(Joan)在委员会中”,

我希望按照行单击EnterKey/而无需单击Enterkey ,就希望根据行 两种方式都应该工作

有人有什么想法吗?

注意: - 我的主要动机实际上是根据行获取内容数组,然后将相同的内容(行阵列)放在Fabricjs的文本框对象中。

解释: - 我有一个html的Textarea和Fabricjs画布中的文本框对象。

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

现在,我必须将内容(put/show)保存在Fabricjs的文本框对象中,该内容(用HTML的TextArea和Textarea编写的内容相同的内容(相同的内容)。

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>

enter image description here

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

晚雾 2025-02-14 07:16:16

我制作了有效的代码。它可以经常优化,但是我花了一个多小时,所以我做不到……

最重要的部分是:
在HTML中,请使用“行”和“ COLS”来限制文本方面的大小。您可能需要将此尺寸与网站的字体大小同步。

在CSS中,只需使用rass:

在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>

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>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文