javascript - 使用innerText从隐藏的HTML元素中检索文本

Question

我需要从用 css 隐藏的 html 元素中获取文本。我知道根据规范，innerText 将遵守 css 规则。但是使用 textContent 的替代方法会忽略我需要保留在字符串中的换行符和制表符。

有什么办法可以解决这个问题吗？

为简单起见，请参阅以下示例:

const inntxt = document.querySelector('.expandable').innerText
console.log(inntxt) // Here we don't get the hidden div's text.

const txtct = document.querySelector('.expandable').textContent

console.log(txtct) // Here the result removes the line break.

.hidden{
  display: none;
}

<div class='expandable'>
  <span class='visib'>
    Red balloon
  </span>
  <br>
  <span class='hidden'>
    Yellow badge<br>Green ribbon
  </span>
</div>

我想解决这个问题的一种方法是替换 <br>使用我自己的字符，例如 # 通过附加它而不是 <br> ，但一定有更好的方法不是吗？

更新

更清楚地说，最终结果应该是:

例如，如果您要console.log()节点中的字符串，那么来自innerText或textContent的字符串应该是: '红气球\n黄色徽章\n绿丝带'

Answer 1

textContent 是非常不直观的不检索<br>新线路。

我建议在 Javascript 中使用 innerHTML 来使用虚拟元素并替换所有 <br>与 \n<br> .

看看这段代码，我认为它解决了您的问题:

const expandable = document.querySelector('.expandable')
const auxEl = document.createElement('div')
auxEl.innerHTML = expandable.innerHTML.replace(/(\<br\>)/, '\n$1')
const textContent = auxEl.textContent

console.log({ textContent })

/* Yields
{
  "textContent": "\n  \n    Red balloon\n  \n  \n    Yellow badge\nGreen ribbon\n  \n"
}
*/

.hidden {
  display: none;
}

<div class='expandable'>
  <div class='visib'>
    Red balloon
  </div>
  <div class='hidden'>
    Yellow badge<br>Green ribbon
  </div>
</div>