如何用HTML/JS将字符串类型的单行代码格式化后正常显示

这个需求完全可以通过JavaScript实现，纯HTML本身没有自动格式化代码的能力，实现逻辑很简单：
textarea原生支持识别字符串里的换行、缩进空格，你只要把后端返回的单行代码字符串处理成带正确换行、层级缩进的规范格式，再赋值给textarea就能正常显示排版整齐的代码，不会全部挤在一行。

• 不推荐直接用模板语法把原始字符串插值到textarea标签内部，拿到textarea的DOM元素后，通过.value属性赋值可以避免特殊字符转义导致的显示问题。

可选实现方案 #

简单场景：自定义格式化规则 #

如果你只需要处理和你示例类似的简单Python代码，不需要兼容复杂语法，可以自己写简单的替换规则完成格式化，参考代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const outputArea = document.getElementById('exampleInputPassword1');
  const rawCode = recordData.output;

  // 适配简单Python代码的格式化规则
  const formattedCode = rawCode
    .replace(/:\s*/g, ':\n    ') // 匹配函数/条件判断的冒号，后接换行+4空格缩进
    .replace(/(?<=\))(?=[a-zA-Z_])/g, '\n') // 匹配代码块闭合位置，和后续同级代码/函数调用之间加换行
    .trim();

  outputArea.value = formattedCode;
})

这个方案的局限性很明显：遇到嵌套代码块、字符串内包含冒号/括号、多逻辑分支等复杂场景时，很容易出现排版错误，只适合格式固定的简单代码场景。

通用场景：使用代码格式化工具 #

如果需要兼容各种复杂语法的代码格式化，直接在前端引入对应语言的格式化工具即可：

1. 拿到原始单行代码字符串后，调用格式化工具的处理接口，传入代码内容、对应语言的缩进配置（比如Python默认4空格缩进）
2. 工具会自动识别语法边界，输出带正确换行、层级缩进的规范代码字符串
3. 把处理完成的字符串赋值给textarea的value属性，就能得到排版规范的代码展示效果

如果你后续需要实现代码语法高亮，textarea本身不支持富文本样式，可以把格式化后的代码放到<code>标签内，搭配对应的高亮样式使用。

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