How to show input as html? - node.js

Question

Hello I was making a website in which I want user to see their input in preview sections.
so if someone type: <h1>HELLO WORLD!</h1> then below preview section should show HELLO WORLD! as heading 1 in ejs.
<div class="form-group">
<label><i class="fad fa-texts"></i> Long Description<span style="color: rgb(175, 22, 22)">*</span>
<p class="text-muted">(Html supported but markdown not supported)</p>
</label>
<textarea name="longDesc" onkeypress="dis()" id="longDesc" class="form-control" minlength="300" required="required" style="width: 100%; height: 300px;"></textarea>
<textarea name="liveDesc" id="liveDesc" class="form-control" minlength="300" required="required" style="width: 100%; height: 300px;" disabled></textarea>
</div>
<script>
function dis (){
var botdesc = document.getElementById("longdesc");
var visualizer = document.getElementById("livedesc");
botdesc.addEventListener("keyup",async (e) => {
const dirtyhtml = marked(botdesc.value.replaceAll(/>+/g, ">").replaceAll(/<+/g, "<"));
const noicehtml = sanitizeHtml(dirtyhtml, {
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['discord-message','discord-messages', 'img','iframe', 'style', 'h1', 'h2', 'link', 'mark', 'svg', 'span']),
allowVulnerableTags: true,
allowedAttributes: {
'*': ["*"]
}
});
visualizer.innerHTML = noicehtml;
});
}
example below:
https://imgur.com/a/mSD6sKc

Answer 1

Using vanilla JavaScript, you can get a value from input or textarea and then push it in any element as HTML child nodes
For example, you have this HTML:
<textarea id="text" onkeyup="onChange()"></textarea>
<div id="htmlView"></div>
In this example, we are going to get value from the textarea and then push HTML nodes in the htmlView div
For this, we can write a function:
function onChange() {
// get value
const text = document.getElementById("text").value;
// set plain text as HTML nodes
document.getElementById("htmlView").innerHTML = text;
}
And, as you can see, it works
function onChange() {
const text = document.getElementById("text").value;
document.getElementById("htmlView").innerHTML = text;
}
<textarea id="text" onkeyup="onChange()"></textarea>
<div id="htmlView"></div>