如何使用 JavaScript 从 DOM 元素获取换行位置

Question

在我的 HTML 页面中，我有很长的文本，在某些单词处有一些自动生成的换行符（使用line-break: normal），现在 JavaScript 库（vue-typer）键入相同的文本，但在某些字符处换行，并且不支持打破文字于字。

因此，我想从默认 HTML 文本中获取所有换行符位置，并将它们插入到 vue-typer 字符串中，这样它将在同一位置进行换行符。

那么问题就变成了：如何从 DOM 文本中获取换行符的位置？

Answer 1

想法：用它的 来标识每一行Y-position。

这是一个简单的算法，我遵循了^

• 将每个单词用一个元素包裹起来，以便使用JS。
• 然后，对每个单词应用.offsetTop属性以获得其Y-position.
• 现在，循环每个元素并根据它们的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，他帮助我开发了这个想法:)