<div>
<button id='bintro'>Escape</button>
</div>
<p id='content'>Click the button to change this text</p>
button {
font-size: 36px;
}
#content {
font-size: 36px;
}
function safe(strings, ...values) {
const result = [];
strings.forEach(s => {
result.push(s);
result.push(_.escape(values.shift() || ''));
});
return result.join('');
}
function escaped() {
const user = 'Jones';
const text = 'hello <b>world</b>';
const result = safe`1. ${user} said: "${text}"`
$('#content').html(result);
}
$('#bintro').on('click', escaped);
This Pen doesn't use any external CSS resources.