通常,字符串被插入为纯文本,这意味着像<
和 >
这样的字符没有特殊含义。
但有时您需要将 HTML 直接渲染到组件中。例如,您正在阅读的这些文字存在于一个 Markdown 文件中,该文件作为 HTML 块包含在此页面中。
在 Svelte 中,您可以使用特殊的 {@html ...}
标签来实现这一点。
应用
<p>{@html string}</p>
重要提示:在将
{@html ...}
内部的表达式插入 DOM 之前,Svelte 不会执行任何清理操作。如果您信任内容(例如您自己编写的文章),则这不是问题。但是,如果它是来自不受信任的用户的内容(例如文章上的评论),则必须手动对其进行转义,否则您可能会将用户暴露于跨站点脚本攻击 (XSS) 中。
1
2
3
4
5
6
<script>
let string = `this string contains some <strong>HTML!!!</strong>`;
</script>
<p>{string}</p>