如何在Svelte中显示HTML字符？寻求替代innerHTML方案

你的问题核心是Svelte默认会转义插值的文本内容，导致你替换后的™无法解析成对应的商标符号。在Svelte里，官方提供了更直接的解决方案——使用{@html ...}指令，比手动操作innerHTML更简洁。

修改步骤： #

• 模板中把{line}替换为{@html line}，Svelte会自动解析字符串里的HTML实体并渲染成对应的符号
• 你的parseLines替换逻辑不需要改动，保持原样即可

修改后的完整代码：

<h1>Test html codes</h1>
{#each lines || [] as line}
    <div id="comment-line">
        {@html line}
    </div>
{/each}

<script>
    let rawData = [
        'Abc',
        'Xyz!tm',
        'Mno'
    ]
    $: lines = parseLines(rawData)
    
    function parseLines(array) {
        let new_array = []
        var new_line
        for (var line of array) {
            new_line = line.replaceAll('!tm', '&trade;');
            new_array.push(new_line)
        }
        return new_array
    }
</script>

注意事项： #

使用{@html}时要确保渲染的内容是安全的，如果内容来自不可信的用户输入，一定要先做XSS过滤，避免安全风险。

内容的提问来源于stack exchange，提问作者Psionman