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

Question

在我的 HTML 页面中，我的长文本在某些单词处有一些自动生成的换行符(使用 line-break: normal)，现在 JavaScript 库 ( vue-typer) 类型相同文本，但会在某些字符处换行，并且不支持在单词处换行。

所以我想从默认的 HTML 文本中获取所有换行符位置并将它们插入到 vue-typer 字符串中，这样它就会在同一个地方换行符。

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

Answer 1

Idea: Identify each line with its Y-position.

这是一个简单的算法，我跟着^

• 每个单词用一个元素包裹起来，以便于使用JS。
• 然后，对每个单词应用 .offsetTop 属性以获取其Y 位置。
• 现在，循环每个元素并根据它们的 Y 位置 对它们进行分组，即提取行。
• 最后，换行符的位置只是“每行的结尾”，因此它是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，他帮助我开发了这个想法:)