为什么Nodejs中EJS的include会有那么多的空白字符?

为什么Nodejs中EJS的include会有那么多的空白字符?

每次include部分的前面都会有一大段的空白字符，如图： enter image description here

代码为:

<% include common/user.html %>
8 回复

为什么Nodejs中EJS的include会有那么多的空白字符?

在使用EJS模板引擎时，你可能会遇到一个常见的问题：当你使用<%- include('path/to/file.ejs') -%>来包含其他文件时，这些被包含的文件会在结果HTML中产生大量的空白字符。这通常是因为被包含文件（例如common/user.html）本身包含了额外的空白字符或换行符。

示例

假设我们有两个文件：

index.ejs:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <%- include('common/user.html') -%>
</body>
</html>

common/user.html:

<div>
    <h1>User Information</h1>
    <p>Name: John Doe</p>
</div>

在这个例子中，common/user.html 文件中包含了额外的空白字符和换行符，导致最终生成的HTML中也会有额外的空白字符。

解决方法

要解决这个问题，可以考虑以下几种方法：

  1. 删除多余的空白字符: 确保common/user.html文件中没有多余的空白字符和换行符。

    <div><h1>User Information</h1><p>Name: John Doe</p></div>

  2. 使用<%-标签: 使用<%-标签而不是<%=标签来包含文件，这样可以避免多余的空白字符。

    <%- include('common/user.html') -%>

  3. 自定义过滤器: 如果你需要更复杂的处理，可以在EJS中定义一个自定义过滤器来清理多余的空白字符。

    app.engine('ejs', require('ejs').renderFile);
app.set('view engine', 'ejs');

ejs.filters.trim = function(str) {
    return str.replace(/\s+/g, '');
};

    在模板中使用：

    <%- include('common/user.html') | trim -%>

通过这些方法，你可以有效地减少或消除在使用EJS模板引擎中的include指令时产生的多余空白字符。


编码问题？或者有BOM！

<%- include common/user.html -%>

用这个试试

测试了一下 应该不是编码问题。

测试了一下，还是和之前一样。

我也遇到这样的问题，求解求。楼主知道原因了吗？

用notepad++把文件修改成utf-8无BOM格式编码就可以了！！

在 Node.js 中使用 EJS 模板引擎时，include 指令可能会引入多余的空白字符。这通常是因为被包含文件（如 common/user.html）的开头或结尾有多余的空白字符。

示例代码

假设我们有以下目录结构：

project/
├── views/
│   ├── index.ejs
│   └── common/
│       └── user.html
└── app.js

文件内容

views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Include Example</title>
</head>
<body>
<% include ./common/user.html %>
</body>
</html>

views/common/user.html

<div>
    <p>User Info</p>
</div>

解决方案

  1. 删除多余空白字符：确保 user.html 文件中没有多余的空行或空白字符。
  2. 使用 EJS 的 <%- 输出标签：如果你希望输出的内容不带任何 HTML 转义，并且没有额外的空白字符，可以使用 <%- 标签。

修改后的 views/common/user.html

<div><p>User Info</p></div>

修改后的 views/index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>EJS Include Example</title>
</head>
<body>
<%- include('./common/user.html') %>
</body>
</html>

解释

  • 多余的空白字符：如果 user.html 文件以空行或空白字符开头或结尾，这些字符会被包含到最终的 HTML 结果中，从而导致页面中的空白字符增多。
  • 使用 <%- 标签：<%- 标签会直接输出内容，而不进行 HTML 转义，并且不会添加额外的空白字符。

通过上述方法，你可以解决 include 时出现的多余空白字符问题。

回到顶部