JSFiddle - React, Tailwind, and code Playground
HTML
Look in the console.
JavaScript
Object.defineProperty(String, "cook", {
value(strings, subs, mapFn) {
const {length} = strings;
if (length <= 0) {
return "";
}
let s = strings[0];
for (let i = 1; i < length; ++i) {
let sub = subs[i-1];
if (mapFn) {
sub = mapFn(sub);
}
s += String(sub) + strings[i];
}
return s;
},
configurable: true,
writable: true
});
const escapeHTML = val => String(val).replace(/&/g, "&").replace(/</g, "<");
const escape = (strings, ...subs) => String.cook(strings, subs, escapeHTML);
const foo = "<script>alert('maliciousness!');<\/script>";
console.log(escape`<p>${foo}</p>`);
// => <p><script>alert('maliciousness!');</script></p>