使用 innerText 从隐藏的 HTML 元素中检索文本答案

【问题标题】：Use innerText to retrieve text from hidden HTML elements使用 innerText 从隐藏的 HTML 元素中检索文本
【发布时间】：2020-01-24 13:16:39
【问题描述】：

我需要从一个用 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>

我想解决它的一种方法是将  替换为我自己的字符，例如#，通过附加它而不是 ，但一定有更好的方法不是吗？

更新

为了更清楚，最终结果应该是：

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

【问题讨论】：

简而言之，你想要得到的最终结果是什么？
使用.innerHTML怎么样？您可以这样做并将  替换为\n
@GMaiolo 你能提供一个例子吗
@S.Schenk 添加了一个带有 sn-p 的答案，如果有帮助请告诉我

标签： javascript html

【解决方案1】：

textContent 不检索   新行是非常不直观的。

我建议使用innerHTML 在Javascript 中使用虚拟元素，并将所有  替换为\n 。

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

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>

【讨论】：

【解决方案2】：

不确定您要在这里实现什么，但您可能想要做的是将innerText 更改为innerHTML，然后保留换行符。

与innerText 不同，innerHTML 允许您使用 HTML 丰富 text 并且不会自动对文本进行编码和解码。换一种说法， innerText 检索标签内容并将其设置为纯文本，而innerHTML 以 HTML 格式检索和设置内容。

引用自https://stackoverflow.com/a/19030857/4073621。

【讨论】：

我将如何删除字符串中的所有 html 标记（如 div、span 等）？
innerHTML 会发生这种情况。它可以是纯文本或 HTML，您可以从元素中获取。

【解决方案3】：

请使用以下脚本获取innerText

const inntxt = document.getElementsByClassName('expandable')[0].innerText;
console.log(inntxt);

【讨论】：