javascript - 从（换行符：正常）html中获取特定行

Question

我想知道这是否可以使用 JavaScript。我想从以下页面中提取第三行：

<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>

我相信我的 html 看起来像：

而红色下划线为第三行，在视图中动态调整。

我尝试.innerHTML了.innerText方法，但它无法识别换行符。

我想如果我能以某种方式获取scrollHeight每一行的内容然后使用 JavaScript，但我没有在互联网上找到任何支持方法。有任何想法吗？

注意：可以假设他/她可以访问该p元素。我们可以继续使用客户端 JS/HTML 解决方案。

标签： javascripthtmlcss

Answer 1

我们可以做到以下几点：

• 将段落文本按space字符拆分得到所有单词
• 将段落的文本设置为空字符串
• 附加每个单词并测量段落的内容大小（谨慎使用，这种测量方式会导致大量布局重新计算）
• 当段落的内容大小与之前的内容大小不一样时，我们知道发生了换行
• 当我们在第 n 行时，添加附加的单词直到到达新行
• 所述变量是提取的字符串

即使文本很长，此解决方案也不会阻止 UI 事件。为了在这个解决方案中实现这一点，我们可以将长时间运行的任务拆分为更小的任务，以便仍然可以处理 UI 事件。要拆分它，我们可以使用setTimeout(..., 0). 使用setTimeout这种方式可以推迟运行时间较短的任务。它们仅在位于消息队列的最前面时才运行。只有当一个运行时间较短的任务完成时，下一个运行时间较短的任务才会推迟到消息队列的末尾。这允许其他与 UI 相关的消息（例如，单击事件侦听器的回调函数）也可以运行；因此是非阻塞的。

const p = document.querySelector('p')
const texts = p.innerText.split(' ')
const textsLength = texts.length
const nthLine = 3 // The line from which you extract the string

let i = 0
let currentWord = 0
let currentLine = 0
let currentBoxHeight = 0
let nthLineText = ''

p.innerText = ''
function getNthLineText() {
  // Split the long-running tasks of measuring words to only 100 word per callback function
  for (currentWord; currentWord < (i + 1) * 100 && currentWord < textsLength; currentWord++) {
    p.innerText += ` ${texts[currentWord]}`
    
    // Paragraph box is larger? Line-break occurred
    if (p.scrollHeight > currentBoxHeight) {
      currentBoxHeight = p.scrollHeight
      currentLine += 1
    }
    
    // We're at the nth line we want to extract, add the appended word to the result variable
    if (currentLine === nthLine) {
      nthLineText += ` ${texts[currentWord]}`
    }
  }
  
  if (currentLine > nthLine || currentWord >= textsLength) {
    console.log(`String extracted: ${nthLineText === '' ? 'None extracted' : nthLineText}`)
    p.innerText = texts.join(' ')
  } else {
    setTimeout(getNthLineText, 0)
  }
}

getNthLineText()

<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>