如何用字符串（ReactJS）中的空格替换并在 HTML 中呈现？答案

【问题标题】：How to replace space with   in a string (ReactJS) and render in HTML?如何用字符串（ReactJS）中的空格替换并在 HTML 中呈现？
【发布时间】：2021-12-16 05:37:05
【问题描述】：

<div className="mt-2 font-sidebar capitalize">
  {item.title}
</div>

item.title 可以是任何字符串（来自后端），例如“所有产品”、“最喜欢”、“特色商品”等。

我想要一种将item.title 中的空格替换为&nbsp; 的方法，以便在以HTML 呈现时它仍然有空格 - 这是针对特定用例的。

非常感谢您的帮助。

【问题讨论】：

使用item.title.replace时出了什么问题？
@evolutionxbox 直接打印出来。例如：所有产品
reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml
这能回答你的问题吗？ How to show html entity using React?
感谢@evolutionxbox 这有帮助！有没有更好的方法来做到这一点？

标签： javascript html reactjs string next.js

【解决方案1】：

你可以这样做：

{item.title.replaceAll(' ', '\u00a0')};

如果你确定只有1个空格，你可以使用replace()，所以我建议使用replaceAll()

您可以使用&nbsp; 所指的Unicode 字符（U+00A0）来代替&nbsp;：

【讨论】：

这行得通....