JSFiddle - React, Tailwind, and code Playground
HTML
Look in the console.
JavaScript
const toLength = n => {
n = Math.min(+n || 0, Number.MAX_SAFE_INTEGER);
return n < 0 ? Math.ceil(n) : Math.floor(n);
};
Object.defineProperty(String, "interpolate", {
value(strings, subs = [], mapFn) {
const strslen = toLength(strings.length);
if (strslen <= 0) {
return "";
}
const subslen = toLength(subs.length);
let s = "";
let index = 0;
while (true) {
const subIndex = index;
s += strings[index++];
if (index == strslen) {
return s;
}
if (subIndex < subslen) {
const sub = subs[subIndex];
s += mapFn ? mapFn(sub) : sub;
}
}
},
configurable: true,
writable: true
});
const escapeStringForTagBody = val => String(val).replace(/&/g, "&").replace(/</g, "<");
const escapeForTagBody = (strings, ...subs) => String.interpolate(strings, subs, escapeStringForTagBody);
const foo = "<script>alert('maliciousness!');<\/script>";
console.log(escapeForTagBody`<p>${foo}</p>`);
// => <p><script>alert('maliciousness!');</script></p>