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


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

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

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

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

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

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

■partialを埋め込む方法

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

[javascript]

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":"shisuh.com"};
var completePage = ejs.render(partialData,{"locals":layoutLocal});
console.log("complete page is "+completePage);

});

});
[/javascript]

layout EJSファイル(layout.ejs)

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

partial EJSファイル(simpleMail.ejs)

[javascript]
<%=userName %>さん、こんにちわ<br><br>
CSSで
<span style="font-size:20px;background-color:yellow;color:red;font-weight:bold;">
スーパーの特売!!
</span>も表現できます。
<br>
[/javascript]

■Good

上記のコマンドのコンソールにHTMLが出力されれば成功です。
[bash]
complete page is Yoshihiko Hoshinoさん、こんにちわ<br><br>

CSSで
<span style="font-size:20px;background-color:yellow;color:red;font-weight:bold;">
スーパーの特売!!
</span>も表現できます。
<br>

[/bash]

■Bad

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

[bash]
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;

[/bash]

SNSでもご購読できます。

コメントを残す

*