Мне нужно преобразовать значение Textarea в массив, чтобы каждый элемент массива был значением строки в текстовой области
Пример в изображении Textarea Отображение двух строк, и массив должен быть < /p>
[
"2025年3月7日(金)から9日(日)まで、東静岡のグランシップ広場で「おいもフェス SHIZUOKA 2025」",
"が開催されます。"
]
< /code>
Моя идея - создать Div с тем же размером шрифта и шириной Textarea, я замерлю свой текст и проверю высоту на разделенную строку, (textarearef.current.value - это значение Textarea), но но Это не правда, потому что div отображает две строки в той же Textarea, но содержимое строки отличается, см. Мое изображение
const getRenderedRows = () => {
const lines = textareaRef.current.value.split('\n');
const renderedRows = [];
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
context.font = window.getComputedStyle(textareaRef.current).font;
const textareaWidth = textareaRef.current.clientWidth - 20;
const textareaStyles = window.getComputedStyle(textareaRef.current);
const div = document.getElementById('textForm');
div.style.width = `${textareaRef.current.clientWidth}px`;
div.style.fontSize = `14px`;
div.style.lineHeight = textareaStyles.lineHeight;
lines.forEach(line => {
if (line === '') {
// Handle blank lines
renderedRows.push('');
} else {
let start = 0;
while (start < line.length) {
let end = start;
while (end < line.length) {
const text = line.slice(start, end);
div.textContent = text;
// console.log(div.clientHeight)
if (div.clientHeight > 21) {
break;
}
end++;
}
renderedRows.push(line.slice(start, end));
start = end;
}
}
});
return renderedRows;
}
Мне нужно преобразовать значение Textarea в массив, чтобы каждый элемент массива был значением строки в текстовой области Пример в изображении Textarea Отображение двух строк, и массив должен быть < /p> [code][ "2025年3月7日(金)から9日(日)まで、東静岡のグランシップ広場で「おいもフェス SHIZUOKA 2025」", "が開催されます。" ] < /code> Моя идея - создать Div с тем же размером шрифта и шириной Textarea, я замерлю свой текст и проверю высоту на разделенную строку, (textarearef.current.value - это значение Textarea), но но Это не правда, потому что div отображает две строки в той же Textarea, но содержимое строки отличается, см. Мое изображение const getRenderedRows = () => { const lines = textareaRef.current.value.split('\n'); const renderedRows = []; const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); context.font = window.getComputedStyle(textareaRef.current).font; const textareaWidth = textareaRef.current.clientWidth - 20; const textareaStyles = window.getComputedStyle(textareaRef.current); const div = document.getElementById('textForm'); div.style.width = `${textareaRef.current.clientWidth}px`; div.style.fontSize = `14px`; div.style.lineHeight = textareaStyles.lineHeight;
lines.forEach(line => { if (line === '') { // Handle blank lines renderedRows.push(''); } else { let start = 0; while (start < line.length) { let end = start; while (end < line.length) { const text = line.slice(start, end); div.textContent = text; // console.log(div.clientHeight) if (div.clientHeight > 21) { break; } end++; } renderedRows.push(line.slice(start, end)); start = end; } } });