admin管理员组

文章数量:1419666

I am working on dynamically building an HTML output file in a NodeJS application. While working in development, I want this file to be pretty-printed so I can inspect the output better. Here is what I've got so far, it's very bare bones because I'm still figuring out how I want to do this:

const { JSDOM } = require('jsdom');

const dom = new JSDOM('<!DOCTYPE html><head /><body /></html>');
const document = dom.window.document;

const css = `
    .row {
        display: flex;
        flex-direction: row;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
`;

const createElement = ({ tagName, textContent }) => {
    const elem = document.createElement(tagName);
    elem.textContent = textContent;
    return elem;
};

document.head.appendChild(createElement({ 
    tagName: 'title', 
    textContent: 'Shopping List'
}));
document.head.appendChild(createElement({
    tagName: 'style',
    textContent: css
}));

console.log(dom.serialize()); // TODO delete this

As you can see, I'm logging the output of dom.serialize(), which gives me a string version of the HTML I am building with my JS code. The thing is, it's all one-lined like this:

<!DOCTYPE html><html><head><title>Shopping List</title><style>
    .row {
        display: flex;
        flex-direction: row;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
</style></head><body></body></html>

The only line breaks e from my literal CSS that I'm adding. What I want is to serialize and print this all out in a way that effectively pretty-prints it, ie includes line breaks and indenting. This is for development only, so that I can more easily read the output as I debug it.

I am working on dynamically building an HTML output file in a NodeJS application. While working in development, I want this file to be pretty-printed so I can inspect the output better. Here is what I've got so far, it's very bare bones because I'm still figuring out how I want to do this:

const { JSDOM } = require('jsdom');

const dom = new JSDOM('<!DOCTYPE html><head /><body /></html>');
const document = dom.window.document;

const css = `
    .row {
        display: flex;
        flex-direction: row;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
`;

const createElement = ({ tagName, textContent }) => {
    const elem = document.createElement(tagName);
    elem.textContent = textContent;
    return elem;
};

document.head.appendChild(createElement({ 
    tagName: 'title', 
    textContent: 'Shopping List'
}));
document.head.appendChild(createElement({
    tagName: 'style',
    textContent: css
}));

console.log(dom.serialize()); // TODO delete this

As you can see, I'm logging the output of dom.serialize(), which gives me a string version of the HTML I am building with my JS code. The thing is, it's all one-lined like this:

<!DOCTYPE html><html><head><title>Shopping List</title><style>
    .row {
        display: flex;
        flex-direction: row;
    }

    .col {
        display: flex;
        flex-direction: column;
    }
</style></head><body></body></html>

The only line breaks e from my literal CSS that I'm adding. What I want is to serialize and print this all out in a way that effectively pretty-prints it, ie includes line breaks and indenting. This is for development only, so that I can more easily read the output as I debug it.

  • javascript
  • node.js
  • jsdom
Share Improve this question edited Nov 14, 2020 at 11:36 halfer 20.4k19 gold badges109 silver badges202 bronze badges asked Dec 1, 2019 at 22:58 craigmiller160craigmiller160 6,30312 gold badges51 silver badges101 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

You could use an npm package called pretty.

var pretty = require('pretty');

pretty(STRING_OF_HTML);

Before

<!DOCTYPE html> <html lang="en"> <head> 
<meta charset="UTF-8"> <title>Home</title> 
</head> <body> This is content. </body> </html>

After

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Home</title>
  </head>
  <body>
    This is content.
  </body>
</html>

By using Prettier:

import { JSDOM } from "jsdom";
import prettier from "prettier";

const dom = new JSDOM(`<!DOCTYPE html><html><head><title>Documentation</title></head><body/></html>`);

const resultHtml = dom.serialize();
const formattedHtml = await prettier.format(resultHtml, { parser: "html" });
console.log(formattedHtml)

Will print

<!DOCTYPE html>
<html>
  <head>
    <title>Documentation</title>
  </head>
  <body>
  </body>
</html>

本文标签： javascriptIs it possible to prettyprint a JSDOM documentStack Overflow

版权声明：本文标题：javascript - Is it possible to pretty-print a JSDOM document? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745313430a2653040.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。