Nodejs 怎么样才能将HTML格式化输出？

Nodejs 怎么样才能将HTML格式化输出？

我使用的是expressjs中hbs（HandlerBars）的模板引擎，输出的HTML格式非常乱，用过第三方插件html中的prettyPrint 可以将html格式化输出。

我现在想问的是express用没有设置让res.render的html自动格式化，不需要第三方插件支持。

2 回复

Node.js 如何将 HTML 格式化输出？

在使用 Express.js 和 HBS（Handlebars）模板引擎时，有时会遇到输出的 HTML 格式混乱的问题。虽然可以使用第三方插件如 html-beautify 来格式化 HTML，但本文将介绍如何在不依赖第三方插件的情况下实现这一功能。

使用 Handlebars 的内置功能

Handlebars 本身提供了一些方法来帮助我们格式化输出的 HTML。我们可以自定义一个 Handlebars 辅助函数（helper）来实现这一功能。

  1. 安装 Handlebars： 如果你还没有安装 Handlebars，可以通过 npm 安装：

    npm install hbs

  2. 创建自定义辅助函数： 在你的项目中创建一个文件，例如 helpers.js，并添加以下代码：

    const Handlebars = require('hbs');

// 自定义辅助函数，用于格式化 HTML
Handlebars.registerHelper('formatHtml', function(html) {
  return new Handlebars.SafeString(html);
});

  3. 在 Handlebars 模板中使用该辅助函数： 在你的 Handlebars 模板文件中，你可以这样使用：

    <div>
  {{formatHtml yourHtmlContent}}
</div>

  4. 在 Express 中应用： 在你的 Express 应用中，确保加载了 Handlebars 并注册了自定义辅助函数：

    const express = require('express');
const hbs = require('hbs');

const app = express();
app.set('view engine', 'hbs');

// 加载自定义辅助函数
require('./helpers')(hbs);

// 示例路由
app.get('/', (req, res) => {
  const htmlContent = `
    <div>
      <p>This is a formatted HTML content.</p>
    </div>
  `;
  res.render('index', { yourHtmlContent: htmlContent });
});

app.listen(3000, () => console.log('Server running on port 3000'));

  5. Handlebars 模板文件： 创建一个 views/index.hbs 文件，并添加上述模板代码。

通过这种方式，你可以自定义 Handlebars 辅助函数来格式化输出的 HTML，而无需依赖第三方库。这种方法简单且易于维护，适用于大多数基本需求。如果你有更复杂的格式化需求，可能还是需要考虑使用第三方插件。


要在Express.js中使用HBS（Handlebars）模板引擎时自动格式化HTML输出，你可以通过自定义一个Handlebars助手来实现。这种方法可以避免依赖第三方库，并且让你的应用保持轻量级。

以下是一个简单的示例，展示如何实现这一点：

  1. 首先确保你已经安装了express和express-handlebars。如果还没有安装，可以通过npm安装它们：

    npm install express express-handlebars

  2. 在你的Express应用中，配置Handlebars并添加一个自定义助手来处理HTML格式化：

const express = require('express');
const exphbs = require('express-handlebars');

const app = express();

// 配置Handlebars作为模板引擎
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');

// 自定义一个助手来格式化HTML
exphbs.create({
  helpers: {
    prettyPrint: function(html) {
      // 使用DOMParser来解析和重新序列化HTML
      const domparser = new DOMParser();
      const doc = domparser.parseFromString(html, "text/html");
      return doc.documentElement.innerHTML;
    }
  }
});

// 路由示例
app.get('/', (req, res) => {
  res.render('index', { htmlContent: '<div><span>Hello World</span></div>' });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
  1. 创建一个Handlebars模板文件views/index.handlebars:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
{{{prettyPrint htmlContent}}}
</body>
</html>

在这个例子中，我们创建了一个名为prettyPrint的自定义Handlebars助手，该助手接受一段HTML字符串，使用DOMParser将其解析后重新序列化，从而格式化输出HTML。在模板文件中，我们使用{{{prettyPrint htmlContent}}}来调用这个助手。

注意，这种方法适用于浏览器环境下的DOM操作。如果你的应用是在服务器端运行，可能需要引入一个能够解析HTML的库，例如parse5或xmldom，来替代DOMParser。

回到顶部