htmlタグが表示されてしまう
Node.js Express ejsを使って、Webアプリを作成していた際、request.render()で飛ばした文字列が、そのまま表示されてしまった。
htmlと認識されるようにしたい。
ブラウザにこんな感じでhtmlタグが表示されてしまっている。
<h1>そのまま表示される<br>のを直したい</h1>
<h2>そのまま表示されるよぉ〜</h2>
現在のコード( cssとかは割愛）
app.js
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
const result = [{comment:"<h1>そのまま表示される</h1>"},{comment:"<h2>そのまま表示される</h2>"}];
res.render('index.ejs',{tests:result});
});
index.ejs
<% tests.forEach(test => { %>
<div id="comment"><%= test.comment %> </div>
<% }); %>
いろいろ調べた結果
1日かけて調べたけど、なかなか解決に至る記事が見つからず…
結局、「brタグ html 表示 変換」なんてワードチョイスが悪かったみたいで、「node.js ejs htmlタグ」で調べたらすぐ解決した。
request.send()使用するとか、{Content-Type:text/html}を指定するとか、いろいろ見つけたけど、原因はめっちゃシンプルに解決できました。
解決方法
ejsでの変数の出力を<%= %>→<%- %>にするだけでした。
なので、以下に変更
index.ejs
<% tests.forEach(test => { %>
//<div id="comment"><%= test.comment %> </div>
↓↓↓↓↓↓↓↓
<div id="comment"><%- test.comment %> </div>
<% }); %>
ちゃんと表示されるようになりました！
<%= %> と <%- %>
どちらもHTML内で変数として出力してくれるが、以下の違いがあるよう。
<%= %> ：文字として出力
<%- %> ：HTMLの要素として出力
参考：EJSの基本的な書き方