1

Есть обычная textarea с фиксированной шириной, в ней введен сплошной текст без переноса строк, textarea сама добавила переносы где текст не вмещается в заданную ширину. Мне нужно получить массив этих самых строк так как их видит юзер. Т.е обычное value.split("\n") не работает

9
  • 1
    Что Вы уже пытались предпринять для достижения необходимого результата? Дополните вопрос вашими наработками.
    – UModeL
    2 сен 2021 в 13:18
  • А в каких единицах задаётся ширина textarea? Вы знаете, сколько помещается символов в строке до переноса? 2 сен 2021 в 13:37
  • 1
    @vsemozhebuty: извечный вопрос - шрифт monospace ? )))))
    – UModeL
    2 сен 2021 в 13:41
  • У меня шире вопрос. Как, имея на руках коллекцию, полученную методом getClientRects(), т.е. по 1 прямоугольнику на каждую строку текста в inline-элементе, "вынуть" текст из каждого отдельного прямоугольника? Никакого нет трюка для этого, только количество строк посчитать можно? 2 сен 2021 в 14:19
  • @AlexeyVladimirov: по сути, это то же самое. Только здесь textarea и есть один большой Rect.
    – UModeL
    2 сен 2021 в 14:22

1 ответ 1

2

Периодически видел на разных площадках подобный вопрос, но приемлемых ответов так и не нашёл. Попытался реализовать самостоятельно:

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 через раз (на перспективу;-).

4
  • А снипет должен запускаться? У меня в хроме ничего не показывает... 5 сен 2021 в 19:02
  • @AlexeyVladimirov: только что проверил здесь - всё работает. Тоже Хром.
    – UModeL
    5 сен 2021 в 19:06
  • Это у меня что-то паранормальное, снипет кода не хотел запускаться в масштабе страницы отличном от 100%. 5 сен 2021 в 19:29
  • @AlexeyVladimirov: да, есть такая проблема. Тоже изменил масштаб и попытался запустить - белый экран. Но, я не пользуюсь масштабированием, поэтому не сталкиваюсь с подобными багами. Кстати, 200% работает норм.
    – UModeL
    5 сен 2021 в 19:34

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.