如何在 svelte 中渲染 html

Question

我尝试通过将 html 存储在变量中来渲染 html，但它不起作用，我还尝试了三重花括号

<script>
    let name = 'world';
    let val = ""
    let ans2 = ""
    let ans3;
    import showdown from 'showdown';
    import validity from 'validity-checker';
    function dataSubmit(e){
        e.preventDefault();
    //ans = validity.isEmoji("ggg");
    ans2 = new showdown.Converter();
    ans3 = ans2.makeHtml(val)
    }
</script>

<div>
    <textarea bind:value={val} on:change={dataSubmit}></textarea>
    <div>
    {{{ans3}}}  
    </div>

</div>

Return ans3 变量的类型类似于“

Hello

”

Answer 1

您可以使用

Svelte does not sanitize expressions before injecting HTML. If the data comes from an untrusted source, you must sanitize it, or you are exposing your users to an XSS vulnerability.

Answer 2

通常，字符串作为纯文本插入，这意味着像 < 和 > 这样的字符没有特殊含义。

但有时您需要将 HTML 直接渲染到组件中。例如，您现在正在阅读的单词存在于一个 markdown 文件中，该文件作为 HTML.

的 blob 包含在此页面上

在 Svelte 中，您可以使用特殊的 {@html ...} 标签执行此操作：

{@html 字符串}

在将 {@html ...} 插入 DOM 之前，Svelte 不会对其中的表达式执行任何清理。换句话说，如果您使用此功能，请务必手动转义来自您不信任的来源的 HTML，否则您可能会面临让您的用户遭受 XSS 攻击的风险。

来自https://svelte.dev/tutorial/html-tags

如何在 svelte 中渲染 html

How to render html in svelte

html

render

svelte

svelte-3

Hello