如何在不修剪字符串的情况下设置元素的 textContent？答案

【问题标题】：How to set an element's textContent, without the string getting trimmed?如何在不修剪字符串的情况下设置元素的 textContent？
【发布时间】：2018-07-19 15:05:53
【问题描述】：

我正在尝试将元素的文本内容（div 元素）设置为用户输入的内容。我真的不想使用element.innerHTML = (...)，因为那样它可以被解析为HTML代码而不是纯文本，所以我使用element.textContent = (...)。
但是，输入字符串的开头（和结尾）可以有空格，我不希望字符串在插入元素之前被修剪。
使用innerHTML，我可以简单地将所有空格替换为&nbsp;，但textContent 不会将其显示为空格，而是显示为普通的&nbsp;。

我该怎么做？在此先感谢:)

【问题讨论】：

为什么不在 textContent 后面加上String.prototype.replace('&nbsp',' ')
@TahaAzzabi 是的，这也可以。谢谢！

标签： javascript html trim

【解决方案1】：

要使空白在 DOM 中存在，您可以在 CSS 中应用 white-space: pre-wrap：

for (const target of document.getElementsByClassName('target')) {
  target.textContent = "   Some  text with   various spaces  ";
}

.preserve-whitespace {
  white-space: pre-wrap;
}

.target {
  border: 1px solid red;
  float: left;
  clear: left;
  margin-top: 0.5em;
}

<div class="target"></div>
<div class="target preserve-whitespace"></div>

【讨论】：