如何在React中为文本每个字符后添加​

要实现每个字母后自动添加零宽空格，只需在现有字符替换逻辑完成后，对处理后的字符串做拆分拼接操作即可。零宽空格对应的Unicode字符是\u200B，直接使用它比HTML实体​更适配React渲染逻辑（无需额外处理HTML解析）。

修改后的加密函数代码 #

const generateCryptography = async () => {
  var a = prompt
    .toLocaleUpperCase()
    .replace(/A/gi, "А")
    .replace(/P/gi, "Р")
    .replace(/C/gi, "С")
    .replace(/B/gi, "В")
    .replace(/T/gi, "Т")
    .replace(/S/gi, "Ѕ")
    .replace(/E/gi, "Е")
    .replace(/X/gi, "Х")
    .replace(/J/gi, "Ј")
    .replace(/H/gi, "Н")
    .replace(/O/gi, "О")
    .replace(/Y/gi, "Ү")
    .replace(/M/gi, "Μ")
    .replace(/N/gi, "Ν");
  
  // 给每个字符后添加零宽空格
  a = a.split('').map(char => char + '\u200B').join('');
  
  setResult(a);
};

效果说明 #

处理后的字符串每个字符（包括替换后的特殊字符）后面都会带上零宽空格，渲染到页面时与示例效果一致。比如输入"ALAN"，处理后会变成А\u200BЛ\u200BА\u200BΝ\u200B，React渲染后等同于А​Л​А​Ν​。

备选方案（使用HTML实体） #

如果一定要用HTML实体​，需要通过dangerouslySetInnerHTML渲染结果，示例如下：

// 替换拼接逻辑改为使用HTML实体
a = a.split('').map(char => char + '​').join('');

// 渲染时替换原<h1>{result}</h1>为：
<h1 dangerouslySetInnerHTML={{ __html: result }}></h1>

此方式存在XSS风险，仅在完全信任输入内容的场景下使用，优先推荐Unicode字符方案。

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