node.js ejs にてpartial HTMLがエスケープされて出力される場合の対処法


今回はrailsのpartial的な使い方をEJSを使って行う方法を紹介するとともに、
HTMLが正しくエスケープされなかった場合の対処法を紹介します。

■正しくエスケープされない場合の対処法

(エラーになった人向け)
<%=body %>ではエスケープされないので、<-%body %>を使います。

<%-body %>
<div style="padding-top:30px;padding-bottom:30px;">http://<%=host %>/</div>

■テンプレートを利用してメールを送る方法

「node.jsでHTMLメールを送る」では、EJSを使ってHTMLを送る方法を紹介しています。

■partialを埋め込む方法

フッターをつけたlayout.ejsに、partialで「今日は特売日!」な文章を埋め込みます。


var fs = require("fs");
var ejs = require("ejs");

fs.readFile("simpleMail.ejs","utf8", function(err,data){

  var locals = {"userName":"Yoshihiko Hoshino"};
  var partialResult = ejs.render(data,{"locals":locals});
  fs.readFile("layout.ejs","utf8",function(err,partialData){

    var layoutLocal = {"body":partialResult,"host":"atosaku.com"};
    var completePage = ejs.render(partialData,{"locals":layoutLocal});
    console.log("complete page is "+completePage);

  });

}); 

layout EJSファイル(layout.ejs)

<%-body %>
<div style="padding-top:30px;padding-bottom:30px;">http://<%=host %>/</div>

partial EJSファイル(simpleMail.ejs)

<%=userName %>さん、こんにちわ<br><br>
CSSで
<span style="font-size:20px;background-color:yellow;color:red;font-weight:bold;">
スーパーの特売!!
</span>も表現できます。
<br>
<a href="http://atosaku.com/">僕の作ったサイトはこちら(最後に宣伝)</a>

■Good

上記のコマンドのコンソールにHTMLが出力されれば成功です。

complete page is Yoshihiko Hoshinoさん、こんにちわ<br><br>

CSSで
<span style="font-size:20px;background-color:yellow;color:red;font-weight:bold;">
スーパーの特売!!
</span>も表現できます。
<br>
<a href="http://atosaku.com/">僕の作ったサイトはこちら(最後に宣伝)</a>

<div style="padding-top:30px;padding-bottom:30px;">http://atosaku.com/</div>

■Bad

layout.ejsの<%-body %>を<%=body %>にした場合の出力を紹介します。
フッターはエスケープされずに出力されていますが、partial部分がエスケープされてしまっています。

complete page is Yoshihiko Hoshinoさん、こんにちわ&lt;br&gt;&lt;br&gt;

CSSで
&lt;span style=&quot;font-size:20px;background-color:yellow;color:red;font-weight:bold;&quot;&gt;
スーパーの特売!!
&lt;/span&gt;も表現できます。
&lt;br&gt;
&lt;a href=&quot;http://atosaku.com/&quot;&gt;僕の作ったサイトはこちら(最後に宣伝)&lt;/a&gt;

<div style="padding-top:30px;padding-bottom:30px;">http://atosaku.com/</div>

■本ブログに関連する検索結果を見るには、アトサクが便利です。

node.js ejs speed
node.js テンプレートエンジン 比較
(ボタンをクリックすると、キーワードが保管され後でまとめて読む事ができます。)
アトサクについては、本家ページをご参照下さい。
[sc:採用情報へのリンク]