Как получить местоположение разрыва строки из элемента DOM, используя JavaScript

Question

На моей странице HTML у меня длинный текст, в котором есть некоторые автоматически сгенерированные разрывы строк для определенных слов (с использованием line-break: normal), теперь библиотека JavaScript (vue -тип ) печатает один и тот же текст, но делает разрывы строк для определенных символов и не поддерживает разбиение текста на слова.

Поэтому я хотел получить все местоположения разрывов строк из текста по умолчанию HTML и вставить их в vue -типерная строка, поэтому она будет делать разрывы строк в одном и том же месте.

Таким образом, возникает вопрос: как узнать местоположение переноса строки из текста DOM?

Answer 1

Идея: Определить каждую строку с помощью Y-position.

Вот простой алгоритм, которому я следовал ^

• оберните каждое слово элементом, чтобы использовать JS.
• , затем примените свойство .offsetTop к каждому слову, чтобы получить его Y-position .
• теперь, l oop на каждом элементе и группируем их по их Y-position, т.е. извлекаем строки.
• наконец, позиция переноса строки - это просто "конец каждой строки" , следовательно, это line.length

let p = document.querySelector('p');
p.innerHTML = '<span>' + p.innerHTML.split(' ').join(' </span><span>') + '</span>'; // add spans in b/w

let spans = [...p.querySelectorAll('span')];
let initY = spans[0].offsetTop; // get the offsetTop for first line

let lines = [''], idx = 0, i; 
for(i = 0; i < spans.length; i++) {
  if(spans[i].offsetTop - initY > 2) {
    initY = spans[i].offsetTop; // reset the Y
    lines.push(''); // add starting of line
    idx++; // move to next line
  }
  lines[idx] += spans[i].innerText; // add the text everytime
}

let breaks = lines.map((val, idx) => [idx, val.length]);
// ^ get (row, col) pairs
console.log(breaks);

p {
  line-break: normal;
}
span {
  display: inline-block;
  white-space: pre;
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum felis elit, scelerisque id rhoncus et, hendrerit nec turpis. Phasellus eget condimentum justo. Aliquam porta, risus sed elementum hendrerit, turpis urna posuere libero, eget facilisis sem purus sed mi. Nulla pulvinar nibh quis bibendum lacinia. Aenean eu nibh pharetra, imperdiet mi eget, vehicula mauris. In hac    habitasse platea dictumst. Phasellus ante enim, bibendum quis turpis a, volutpat auctor mi. Mauris scelerisque sem a ornare dignissim. Nullam in sem ac turpis aliquet dictum sit amet dignissim est.</p>

^ : Большое спасибо пользователю GetSet, который помог мне в разработке идеи:)