如何格式化 JavaScript 生成的 HTML 代码？

Question

我正在尝试制作一个可以从传递的数据生成表格的函数。数据应该是这种格式：

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

这里整个数组是一张表，里面的数组是行，里面的对象是行内每个单元格的数据。

问题是当我在这个数据上使用这个函数时：

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

表格由一行组成。我希望生成的代码缩进很好并且易于阅读。我知道这并不重要，因为该函数的主要功能是生成表而不是代码。但是为了更容易理解生成的代码，我希望它是可读的。我的问题是如何对生成的代码应用缩进？

感谢您阅读我的查询！

Answer 1

您可以简单地将\t 用于制表符以缩进（或几个空格，如果您愿意）和\r\n 用于换行。

例如这样的：

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 = `\t\t<${cellType}>${cellContent}</${cellType}>\r\n`;
      rowContent += cellTemplate;
    });

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

  tableTemplate = `<table>\r\n${tableContent}</table>`;
  return tableTemplate;
}

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

console.log(makeTable(tableContent))