htmlタグ、<br>を表示されないようにしたい【Node.js】【 Express】【 ejs】

4193 ワード
ejs JavaScript HTML Node.js HTML テキストリンク

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の基本的な書き方

UVA 607-Scheduling Lectures(線形dp)
Kafka-PHP使用Rdkafka生産/消費データ