html ES6 - 使用标记的模板字符串进行清理

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html ES6 - 使用标记的模板字符串进行清理相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Tagged Templates</title>

  <style>
    abbr {
      border-bottom:1px dotted grey;
    }
  </style>
</head>
<body>

  <div class="bio">

  </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/0.8.2/purify.min.js"></script>
<script>
  function sanitize(strings, ...values) {
    const dirty = strings.reduce((prev, next, i) => `${prev}${next}${values[i] || ''}`, '');
    return DOMPurify.sanitize(dirty);
  }

  const first = 'Wes';
  const aboutMe = `I love to do evil <img src="http://unsplash.it/100/100?random" onload="alert('you got hacked');" />`;

  const html = sanitize`
    <h3>${first}</h3>
    <p>${aboutMe}</p>
  `;

  const bio = document.querySelector('.bio');
  bio.innerHTML = html;
</script>
</body>
</html>

以上是关于html ES6 - 使用标记的模板字符串进行清理的主要内容，如果未能解决你的问题，请参考以下文章

ES6

ES6字符串随笔

使用 vanilla javascript 将 es6 模板字符串转换为 html 元素

javascript ES6 - 标记模板

ES6——字符串模板标签模板字符串函数的默认参数剩余参数数组对象的展开语法数值的表示Symbol

es6 --- 功能