Svelte中字符串包含HTML标签如何正常渲染而非显示为纯文本？

问题原因 #

几乎所有现代前端框架默认都会自动转义插值绑定的字符串内容，目的是避免XSS跨站脚本攻击，因此你插入的带HTML标签的字符串会被识别为纯文本展示，不会被浏览器解析为真实DOM节点。

不同技术栈的解决方案 #

1. React 框架 #

使用React提供的dangerouslySetInnerHTML属性插入HTML内容，代码示例：

<p dangerouslySetInnerHTML={{ __html: text[index] }}></p>

注意：仅在你确认text数组内容完全可控、无用户输入的恶意脚本时使用该方法，避免XSS风险。

2. Vue 框架 #

使用Vue提供的v-html指令渲染HTML内容，代码示例：

<p v-html="text[index]"></p>

注意：仅对可信内容使用v-html，不要应用在用户提交的内容上，防止XSS攻击。

3. 原生JavaScript #

如果是原生JS开发的轮播，直接用innerHTML属性赋值即可：

document.querySelector('p').innerHTML = text[index]

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