Chrome 93.0.4577.82版本JavaScript 回车符及URL编码场景失效咨询

问题原因 #

• 转义字符功能差异：\r是回车符（CR，ASCII码0x0D），原始作用仅为将光标移动到当前行开头，本身不带有光标下移一行的逻辑；真正承担换行逻辑的是\n换行符（LF，ASCII码0x0A）。
• 系统换行规范差异：目前主流系统里仅非常老旧的Mac OS 9及更早版本采用单独\r作为换行标识，Windows采用\r\n组合表示换行，Linux、新版macOS、所有主流浏览器都默认采用单独\n作为换行标识。
• Chrome的处理逻辑变更：Chrome 93及后续版本对单独出现的\r字符做了过滤处理，无论是控制台输出、普通文本渲染还是URL解码流程，单独的\r（URL编码后对应%0D）都会被直接忽略，不会产生任何显示效果，因此出现了文本拼接后\r消失、内容连在一起的问题。

解决方案 #

• 统一使用\n作为换行符：所有需要换行的场景优先使用\n，兼容性覆盖所有主流浏览器和系统，是成本最低的方案。你的示例代码可直接修改为：

  const str = "Hello test" + "\n welcome world"
  

• 存量内容批量替换：如果已经有大量使用\r的存量字符串，可以通过正则统一替换所有单独的\r为\n：

  const formattedStr = rawStr.replace(/\r(?!\n)/g, '\n')
  

  上述正则仅匹配未和\n组合的单独\r，不会破坏已有的\r\n格式内容。
• HTML渲染场景适配：如果需要将文本渲染到HTML页面中，HTML默认不识别\n换行，可选择将文本放入<pre>标签中保留格式，或者将换行符替换为<br>标签：

  const htmlStr = rawStr.replace(/\r\n?|\n/g, '<br>')
  

• URL编码场景适配：编码前先将所有\r替换为\n后再做编码，避免单独的%0D被Chrome解码时过滤。

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