Nodejs ejx 清楚源代码多余的换行问题

Nodejs ejx 清楚源代码多余的换行问题

**如下图，ejs解析完后，源代码会出现多余的换行，有办法清楚掉吗，让html文件整齐显示。 **

alt 1 alt 2

4 回复

当然可以！在使用 EJS（Embedded JavaScript）模板引擎时，解析后的 HTML 文件可能会包含一些不必要的换行符。这些换行符通常会导致 HTML 文件看起来不整齐。为了去除这些多余的换行符，我们可以在渲染模板时对输出的字符串进行处理。

以下是一个简单的示例，展示如何使用 Node.js 和 EJS 来清除多余的换行符：

示例代码

首先，确保你已经安装了 EJS 模块：

npm install ejs

然后，创建一个简单的 EJS 模板文件 template.ejs：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Template Example</title>
</head>
<body>
    <%- include('partials/header') %>
    <h1>Welcome to the EJS Template Example</h1>
    <%- include('partials/footer') %>
</body>
</html>

接着，在 partials 目录中创建两个部分文件 header.ejs 和 footer.ejs：

<!-- partials/header.ejs -->
<header>
    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
</header>

<!-- partials/footer.ejs -->
<footer>
    <p>&copy; 2023 EJS Template Example</p>
</footer>

最后，在你的 Node.js 应用程序中处理多余的换行符：

const fs = require('fs');
const ejs = require('ejs');

// 渲染 EJS 模板
ejs.renderFile('template.ejs', {}, (err, str) => {
    if (err) {
        console.error(err);
        return;
    }

    // 移除多余的换行符
    const cleanedStr = str.replace(/\n\s*\n/g, '\n').trim();

    // 将结果写入文件
    fs.writeFileSync('output.html', cleanedStr);

    console.log('HTML file has been generated and cleaned.');
});

解释

  1. EJS 模板文件：我们在 template.ejs 中包含了两个部分文件 header.ejs 和 footer.ejs，这会产生一些多余的换行符。

  2. 渲染 EJS 模板：我们使用 ejs.renderFile 方法来渲染模板并获取生成的 HTML 字符串。

  3. 清理多余的换行符：通过正则表达式 /\n\s*\n/g，我们可以匹配两个或多个连续的换行符，并将其替换为单个换行符 \n。此外，我们还使用 .trim() 方法来移除字符串开头和结尾的空白字符。

  4. 写入文件：将清理后的 HTML 字符串写入到 output.html 文件中。

通过这种方式，你可以确保生成的 HTML 文件更加整洁，没有多余的换行符。


写个正则过滤一下?

HTML代码压缩下？

在使用 EJS（Embedded JavaScript）模板引擎时，渲染后的 HTML 文件中可能会出现多余的换行符，导致 HTML 结构不够整洁。你可以通过调整 EJS 的选项来解决这个问题。

解决方案

EJS 提供了一个 pretty 选项来控制输出格式化，包括换行和缩进。默认情况下，pretty 选项为 true，这会在渲染结果中添加额外的换行符和缩进。你可以将其设置为 false 或自定义字符串来消除多余的换行符。

示例代码

const ejs = require('ejs');

// 设置 pretty 选项为 false，以消除多余的换行符
const options = {
    delimiter: '?', // 自定义分隔符，如果需要的话
    pretty: false   // 取消自动格式化
};

const htmlTemplate = `
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>?% title %?</title>
</head>
<body>
    <h1>?% heading %?</h1>
    <p>?% content %?</p>
</body>
</html>
`;

const data = {
    title: 'My Page',
    heading: 'Hello World',
    content: 'This is a test page.'
};

ejs.render(htmlTemplate, data, options, (err, str) => {
    if (err) throw err;
    console.log(str);
});

解释

在这个示例中，我们将 pretty 选项设置为 false，这样 EJS 渲染后的 HTML 将不会包含多余的换行符和缩进，从而使得 HTML 文件更加紧凑。

其他建议

如果你希望在保持格式化的同时减少换行符的数量，可以将 pretty 设置为一个字符串，比如 ' '（两个空格），这样生成的 HTML 文件会保留一些格式但减少不必要的换行符。

const options = {
    pretty: '  ' // 使用两个空格代替换行
};

通过这种方式，你可以在保持一定程度的可读性的同时减少多余的换行符。

回到顶部