Есть обычная textarea с фиксированной шириной, в ней введен сплошной текст без переноса строк, textarea сама добавила переносы где текст не вмещается в заданную ширину. Мне нужно получить массив этих самых строк так как их видит юзер. Т.е обычное value.split("\n") не работает
1 ответ
Периодически видел на разных площадках подобный вопрос, но приемлемых ответов так и не нашёл. Попытался реализовать самостоятельно:
function fVisibleRowsToArray(textarea) {
document.body.insertAdjacentHTML('beforeend', '<div id="fakediv" style="position: absolute; overflow: hidden; width: 1px; height: 1px; opacity:0;"></div>');
let fakespan = fakediv.appendChild(document.createElement('span'));
fakespan.textContent = textarea.value + '\n STOP';
let TaS = getComputedStyle(textarea);
let aStyleProps = 'display width padding border font lineHeight boxSizing whiteSpace overflowWrap overflow letterSpacing wordSpacing'.split(' ');
aStyleProps.forEach((el) => { fakespan.style[el] = TaS[el]; });
let aTextRows = [];
let range = new Range(), sel, rect, height;
for (let end = 0, start = 0, nLen = fakespan.textContent.length; end < nLen; ++end) {
range.setStart(fakespan.firstChild, start);
range.setEnd(fakespan.firstChild, end);
sel = window.getSelection();
sel.empty(); sel.addRange(range);
rect = sel.getRangeAt(0).getBoundingClientRect();
if (height && rect.height > height) {
start = --end;
aTextRows.push(sel.toString().slice(0, -1));
} else {
height = rect.height;
}
}
fakediv.remove();
console.log(aTextRows); // Only for demo
return aTextRows;
}
/* Only for demo */
fontsize.addEventListener('input', function() {
source.style.fontSize = this.value + 'px'; fVisibleRowsToArray(source);
});
source.addEventListener('input', () => fVisibleRowsToArray(source));
new ResizeObserver(() => fVisibleRowsToArray(source)).observe(source);
#source { width: 300px; font: 16px serif; }
<p>Размер шрифта :<input id="fontsize" type="range" min="8" max="96" value="16"></p>
<textarea id="source" name="" cols="30" rows="10">START 454545454545455iiiiiiiiihlhhny88ngfj7tgjt7 tyf7tgt7tgfjkgktt kukgtt666ktg kgkggk7giuguigigikgk k44gkgkgkylyly 455455iiihny88ngfj7tgjt7tyf7tgt7tgfjkgkttkukgtt6gkgk7giuguigigikgkk44gklylyl
MIDDLE
45iiihlhhny88ngfj7tgjt7 tyf7tgt7tgf jkgkttkukgtt66ktgkgk gkgkgk 7giuguigigik gkkkgkg kgkgkylly 545 45455ii iihl hhny88ngfj7tgjt7 tyf7tgt7tgfjkgkttk ukgtt66ktg kgkgk gkgk7giu guigigikgk kgkylylyly END</textarea>
Отлично работает в Chrome и Edge. В Firefox через раз (на перспективу;-).
-
А снипет должен запускаться? У меня в хроме ничего не показывает... 5 сен 2021 в 19:02
-
-
Это у меня что-то паранормальное, снипет кода не хотел запускаться в масштабе страницы отличном от 100%. 5 сен 2021 в 19:29
-
@AlexeyVladimirov: да, есть такая проблема. Тоже изменил масштаб и попытался запустить - белый экран. Но, я не пользуюсь масштабированием, поэтому не сталкиваюсь с подобными багами. Кстати, 200% работает норм.– UModeL5 сен 2021 в 19:34
monospace
? )))))