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

Question

我正在尝试制作一个可以从传递的数据中生成 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

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

感谢阅读我的查询！

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))

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

How to format JavaScript generated HTML code?

html

javascript

html-table