如何格式化JavaScript生成的HTML代码 实现输出规范缩进提升可读性

需求背景 #

我正在开发一个可根据传入数据生成table表格的函数，要求输入的数据格式如下：

let tableContent = [
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
  [
    {
      type: "td",
      content: "Hello!",
    },
  ],
];

上述整个数组对应一个table，数组内部的子数组对应表格行，子数组中的每个对象对应行内单个单元格的配置数据。

现有实现代码 #

function makeTable(tableArray) {
  //Entire Table
  let tableTemplate;
  let tableContent = "";

  //row level variables
  let rowTemplate;
  let rowContent = "";

  //cell level variables
  let cellType;
  let cellContent;
  let cellTemplate;

  //running function for each row
  tableArray.forEach((row) => {
    //running function for each cell
    row.forEach((cell) => {
      cellType = cell.type || "td";
      if (cellType !== "td" && cellType !== "th")
        return console.error(
          `Error: The type of a cell must be either "td" or "th" you passed "${cellType}"!`
        );
      cellContent = cell.content;
      cellTemplate = `<${cellType}>${cellContent}</${cellType}>`;
      rowContent += cellTemplate;
    });

    rowTemplate = `<tr>${rowContent}</tr>`;
    tableContent += rowTemplate;
    rowContent = ""
  });

  tableTemplate = `<table>${tableContent}</table>`;
  return tableTemplate;
}
//this function outputs:
//<table><tr><td>Hello!</td></tr><tr><td>Hello!</td></tr></table>
//if used on the above data

问题描述 #

调用该函数生成的HTML代码全部挤在同一行，为了方便理解生成的代码结构，需要输出有规范缩进排版的代码。

解决方案 #

只需要在拼接HTML字符串时，新增换行符\n和对应层级的缩进即可，你可以自行调整缩进的空格数，修改后的代码如下：

// 定义单级缩进的内容，这里用2个空格，可按需改成4个空格或者\t制表符
const INDENT_UNIT = '  ';

function makeTable(tableArray) {
  let tableTemplate;
  let tableContent = "";
  let rowTemplate;
  let rowContent = "";
  let cellType, cellContent, cellTemplate;

  tableArray.forEach((row) => {
    row.forEach((cell) => {
      cellType = cell.type || "td";
      if (cellType !== "td" && cellType !== "th")
        return console.error(
          `Error: The type of a cell must be either "td" or "th" you passed "${cellType}"!`
        );
      cellContent = cell.content;
      // 单元格层级加2级缩进，末尾加换行
      cellTemplate = `${INDENT_UNIT.repeat(2)}<${cellType}>${cellContent}</${cellType}>\n`;
      rowContent += cellTemplate;
    });

    // 行标签加1级缩进，前后加换行
    rowTemplate = `${INDENT_UNIT.repeat(1)}<tr>\n${rowContent}${INDENT_UNIT.repeat(1)}</tr>\n`;
    tableContent += rowTemplate;
    rowContent = "";
  });

  // table标签外层不加缩进，内部内容前后加换行
  tableTemplate = `<table>\n${tableContent}</table>`;
  return tableTemplate;
}

输出效果 #

调用上述修改后的函数，传入示例数据，输出的代码如下：

<table>
  <tr>
    <td>Hello!</td>
  </tr>
  <tr>
    <td>Hello!</td>
  </tr>
</table>

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