Template Strings
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
<div id="placeH">
Sample Text
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/1.0.8/purify.min.js"></script>
JavaScript
const elt = document.querySelector('#placeH');
//setTimeout(()=>elt.textContent = "<p>Mark i</p>",110);
function sanitize(literals, ...models) {
const str = literals.reduce((o, n, i) => {
const dDiv = document.createElement('div');
dDiv.textContent=models[i-1];
return o + models[i-1]+ n;
//return o + dDiv.innerHTML+ n || '';
});
console.log(str, DomPurify.sanitize(str));
return str;
}
function dummer(v='OMG<img><b><script>gh<//script>'){
return `<i>${v}</i>`;
}
function vill(dum) {
return `<h2>Hahah ${dum}${dummer()}></h2>`;
}
const rawStr = (p) => sanitize`
<div>${p.name}</div>
<h1>${p.age}</h1>
<h4>${p.vill}</h4>
<p>${vill(p.dum)}</p>
`;
elt.innerHTML = rawStr({
name: 'rohit',
age: 22,
vill: "roh img ",
dum: "<img src=1 onerror=alert('-evil')>"
});