如何解决AngularJS渲染JSON时自动在首尾添加多余空白的问题

问题根因 #

你遇到的空白和你处理JSON数据的操作无关，问题出在模板写法上：

• 标签嵌套顺序错误：规范的代码块写法是<pre>嵌套<code>，你写反了标签顺序，浏览器解析时会生成额外的空白节点
• <pre>标签会原封不动保留内部所有换行、缩进、空格，你在模板里写的插值表达式{{ jsonFormatter | json}}前后有大量缩进和换行，这些内容都会被直接渲染到页面上，就是你看到的JSON前后的多余空白

解决方案 #

1. 修正模板写法 #

调整标签顺序，同时移除插值表达式前后的所有缩进、换行，示例如下：

<pre><code>{{ jsonFormatter | json }}</code></pre>

如果需要格式化JSON的缩进展示，可以给json过滤器传缩进参数，比如要2空格缩进就写成：

<pre><code>{{ jsonFormatter | json(2) }}</code></pre>

2. 框架级空白配置（可选） #

如果你用的是Vue/Angular等支持模板空白处理的框架，可以开启空白压缩配置：

• Vue3 可在组件配置中添加 whitespace: 'condense'
• Angular 可在angular.json中设置preserveWhitespaces: false

冗余处理说明 #

你之前使用JSON.parse(JSON.stringify(response.data).replace(/\s(?=\w+":)/g, ""))处理数据的操作是针对JSON本身的内容空白，对模板渲染产生的额外空白无效，可以删掉这部分代码。

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