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

Question

bounty到期在6天内。该问题的答案有资格获得+ 50声望赏金。Schotsl想要引起更多关注对此问题。

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

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

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

Answer 1

Idea：用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;
for(let 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
}

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

//p.innerHTML += '<hr/>Line breaks (row, col):<br/>' + breaks.join('\n');

/*let aLine = lines[3].reduce((res, now) => res += now.innerText, '').replace('<span>|</span>', '');
console.log(aLine);*/

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，他在developing the idea中为我提供了帮助：）