e.currentTarget.innerText 会自动删除多余的空格吗？答案

【问题标题】：Does e.currentTarget.innerText automatically remove extra whitespace?e.currentTarget.innerText 会自动删除多余的空格吗？
【发布时间】：2021-09-02 08:48:53
【问题描述】：

在我的应用程序中，我有一个自动完成的名称列表，当用户在我的文本框中键入时会填充这些名称。此列表由 api 调用返回的数组填充，在调试器/DOM 中如下所示：

<ul className="suggestions">
    <li>John  Brown</li>
    <li>Mary  Waters</li>
    ...
</ul>

请注意，名字和姓氏之间有 2 个空格。这可能是因为返回的数据是“脏的”或者是设计使然。让我们假设，我想保留这两个空格。我的问题是，当用户单击项目时，它会触发我的事件处理程序，如下所示：

onClick = e => {
    this.setState({
        activeSuggestion: 0,
        filteredSuggestions: [],
        showSuggestions: false,
        userInput: e.currentTarget.innerText
    });
};

当我检查e.currentTarget.innerText 的值时，它现在显示“John Brown”，只有一个空格。我没有任何切片、拼接、替换等方法来解析此字符串以将其删除，所以我的问题是“.innerText”是否会自动删除第二个空格？如果是这样，有没有办法在抓取用户选择的 userInput 时保留第二个空格？”

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText
这有帮助吗？ stackoverflow.com/questions/47768523/… 不是innertext 删除任何内容或忽略任何内容，而是为您提供渲染版本的html。 textContent 或 innerHTML 会更好地为您提供更准确的数据表示，但即使是这些也可以由浏览器修改。 DOM 不应该用于存储数据。
在 HTML 中，任何 >1 的空格都会被忽略，无论是显示文本还是通过 DOM 检索文本。保持空间的唯一保证方法是使用不间断空间&nbsp;
仅作记录，第一条评论完美地解释并回答了我的问题。

标签： javascript reactjs dom innertext

【解决方案1】：

如果有两个空格很重要，请查看使用 html 不间断空格...

&nbsp;

我怀疑预处理器正在删除额外的空间，就像说额外的换行符一样......

【讨论】：

【解决方案2】：

正如 cmets 中所述，developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText 完美地解释了这里发生的事情。为了解决这个问题，我改变了

userInput: e.currentTarget.innerText

到

userInput: e.currentTarget.innerHtml

这会保留“脏”数据中的额外空间。

【讨论】：