How to Render a variable as HTML in EJS ?

How to define a variable in HTML5 ?

In the EJS, the rendering of a variable as HTML consists of a specific tage through which we can control how the content is displayed. This tag involves, <% code %> that allows the execution of code without rendering, <%= code %> escapes and prints the code as HTML, while <%- code %> renders the code as HTML without escaping special characters. In this article, we will see the practical implementation using these tags to Render a variable as HTML in EJS.

Approaches to Render a variable as HTML in EJS:

Embed the variable directly within HTML tags using EJS delimiters: <%= variable %>.
Use conditional statements to render HTML based on the variable’s value conditionally.
Utilize EJS filters to modify the variable before rendering it as HTML.
Incorporate JavaScript functions to manipulate the variable and generate HTML dynamically.
Apply EJS partials or include rendering reusable HTML components with the variable data embedded.

Steps to Render a Variable as HTML in EJS:

Step 1: Create a backend server using the following command in your project folder.

npm init -y

Step 2: Install the necessary package in your server using the following command.

npm i express ejs

Project Structure:

The updated dependencies in package.json file will look like:

"dependencies": {  
    "express": "^4.18.2",    
    "ejs": "^3.1.9",
}

Example: Below is an example to render a variable as HTML in EJS.

HTML

<!DOCTYPE html>
 
<head>
    <title>
        <%= BeginnerData.title %>
    </title>
</head>
 
<body>
    <h1 style="color: green;">
        <%- BeginnerData.title %>
    </h1>
    <p>
        <%= BeginnerData.description %>
    </p>
    <form action="/" method="post">
        <label for="inputTitle">New Title:</label>
        <input type="text" id="inputTitle" name="inputTitle" required>
        <label for="inputDescription">
            New Description:
        </label>
        <input type="text"
               id="inputDescription"
               name="inputDescription"
               required>
        <label for="inputUrl">New URL:</label>
        <input type="url" id="inputUrl" name="inputUrl" required>
        <button type="submit">Update Data</button>
    </form>
    <hr>
    <h2>Updated Data</h2>
    <p>Title: <%= userBeginnerData.title || "No data provided" %>
    </p>
    <p>Description: <%= userBeginnerData.description || "No data provided" %>
    </p>
    <p>URL: <%= userBeginnerData.url || "No data provided" %>
    </p>
</body>
 
</html>

Javascript

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({
    extended: true
}));
let data = {
    title: 'w3wiki',
    description: 'A computer science portal for Beginner',
    url: 'https://www.w3wiki.net/',
};
let gfgData = {};
app.get('/', (req, res) => {
    res.render('index', {
        BeginnerData: data,
        userBeginnerData: gfgData
    });
});
app.post('/', (req, res) => {
    gfgData = {
        title: req.body.inputTitle,
        description: req.body.inputDescription,
        url: req.body.inputUrl,
    };
    res.redirect('/');
});
 
app.listen(port, () => {
    console.log(`Server is running at
     http://localhost:${port}`);
});