如何在浏览器中美观打印换行分隔的服务器响应字符串？

要把服务器返回的换行分隔字符串在浏览器里美观展示，其实有几种简单又实用的方法，根据你的需求选就行：

方法1：用<pre>标签保留原始格式 #

这是最直接的方式，<pre>标签会自动保留字符串里的换行和空格，不需要复杂处理，还能加样式美化。

<!-- 先准备一个容器 -->
<div id="response-container"></div>

<script>
// 模拟服务器返回的响应字符串
const serverResponse = `pg_response_type=A
pg_response_code=A01
pg_response_description=TEST APPROVAL
pg_authorization_code=123456
pg_trace_number=81CE43B2-3740-404D-89CD-0C5F4EB26D05
pg_avs_code=Y
pg_cvv_code=M
pg_merchant_id=191620
pg_transaction_type=10
pg_total_amount=11.11
ecom_billto_postal_name_first=Forte
ecom_billto_postal_name_last=Test`;

// 创建pre元素并填充内容
const preElement = document.createElement('pre');
preElement.textContent = serverResponse;

// 加一点美化样式，让它更好看
preElement.style.cssText = `
  background-color: #f8f9fa;
  padding: 1.5rem;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  white-space: pre-wrap; /* 确保超长内容自动换行，不会横向滚动 */
  line-height: 1.6;
`;

// 把元素加到页面里
document.getElementById('response-container').appendChild(preElement);
</script>

优点：实现简单，完全保留原始响应格式；缺点：结构感不强，适合需要看原始输出的场景。

方法2：转换成结构化列表 #

如果想让每个参数更清晰，可以把每行转换成列表项，还能给键值对的键加高亮，提升可读性。

<div id="response-list"></div>

<script>
const serverResponse = `pg_response_type=A
pg_response_code=A01
pg_response_description=TEST APPROVAL
pg_authorization_code=123456`;

// 分割成每行，过滤掉空行
const lines = serverResponse.split('\n').filter(line => line.trim() !== '');

// 创建无序列表
const ulElement = document.createElement('ul');
ulElement.style.cssText = `
  list-style: none;
  padding: 1.5rem;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 0;
`;

// 遍历每行生成列表项
lines.forEach(line => {
  const li = document.createElement('li');
  li.style.padding = '0.5rem 0';
  li.style.borderBottom = '1px solid #e9ecef';
  
  // 拆分键和值，给键加粗
  const [key, value] = line.split('=', 2);
  if (key && value) {
    li.innerHTML = `<strong>${key}</strong>: ${value}`;
  } else {
    li.textContent = line;
  }
  
  ulElement.appendChild(li);
});

// 移除最后一个列表项的边框
ulElement.lastChild.style.borderBottom = 'none';

document.getElementById('response-list').appendChild(ulElement);
</script>

优点：结构清晰，重点突出；缺点：需要处理键值对拆分，适合响应都是key=value格式的场景。

方法3：做成键值对表格 #

如果想让键和值完全分开展示，表格是最佳选择，视觉上更规整，适合需要快速查找参数的场景。

<div id="response-table"></div>

<script>
const serverResponse = `pg_response_type=A
pg_response_code=A01
pg_response_description=TEST APPROVAL
pg_authorization_code=123456`;

const lines = serverResponse.split('\n').filter(line => line.trim() !== '');

// 创建表格
const table = document.createElement('table');
table.style.cssText = `
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
`;

// 遍历每行生成表格行
lines.forEach(line => {
  const [key, value] = line.split('=', 2);
  if (key && value) {
    const row = document.createElement('tr');
    
    // 键的单元格
    const keyCell = document.createElement('td');
    keyCell.textContent = key;
    keyCell.style.cssText = `
      padding: 1rem;
      background-color: #f8f9fa;
      font-weight: bold;
      width: 35%;
      border-bottom: 1px solid #e9ecef;
    `;
    
    // 值的单元格
    const valueCell = document.createElement('td');
    valueCell.textContent = value;
    valueCell.style.cssText = `
      padding: 1rem;
      border-bottom: 1px solid #e9ecef;
    `;
    
    row.appendChild(keyCell);
    row.appendChild(valueCell);
    table.appendChild(row);
  }
});

// 移除最后一行的边框
table.lastChild?.querySelectorAll('td').forEach(cell => {
  cell.style.borderBottom = 'none';
});

document.getElementById('response-table').appendChild(table);
</script>

优点：视觉规整，可读性极强；缺点：代码稍多，适合参数较多、需要清晰区分键值的场景。

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