在ReactJS中如何将字符串内的空格替换为 并在HTML中正常渲染

你可以通过以下两种方式实现需求，可根据你的业务场景选择：

方案1：直接替换为Unicode非断空格（无XSS风险，推荐） #

React 可以直接识别渲染非断空格的Unicode编码\u00A0，无需处理HTML实体，安全便捷：

<div className="mt-2 font-sidebar capitalize">
  {item.title.replaceAll(' ', '\u00A0')}
</div>

如果你的运行环境不支持replaceAll方法，可以改用正则替换写法：

{item.title.replace(/ /g, '\u00A0')}

方案2：替换为HTML实体 （仅适合完全信任后端返回内容的场景） #

如果必须使用 实体，需要通过dangerouslySetInnerHTML注入内容：

<div 
  className="mt-2 font-sidebar capitalize"
  dangerouslySetInnerHTML={{
    __html: item.title.replaceAll(' ', '&nbsp;')
  }}
/>

注意：该方案存在XSS注入风险，仅可在你100%确认后端返回的item.title不含恶意代码时使用。

内容的提问来源于stack exchange，提问作者Anoop V