Svelte中如何防止textarea的value属性值被自动转义净化？

报错原因 #

{@html 表达式}是Svelte提供的特殊语法，仅能用于元素子节点位置渲染原始HTML内容，不允许写在属性绑定的表达式内部，将其放在value属性的绑定表达式中，会直接触发编译阶段的Unexpected character '@'语法错误。

正确方案 #

不需要通过@html实现textarea值的无转义绑定，根据使用场景选择对应写法即可：

• 常规场景优先使用属性绑定/双向绑定写法：Svelte对DOM属性的赋值是直接操作原生DOM属性，不会做HTML转义处理，传入的字符串会原样展示在输入框中，不会对<、>、&这类特殊字符做实体转义

  <!-- 单向赋值 -->
  <textarea value={rawText}></textarea>
  <!-- 需要同步用户输入的双向绑定场景 -->
  <textarea bind:value={rawText}></textarea>
  

  举个例子：如果rawText的值为<p>测试内容&特殊符号</p>，上述写法会将这段完整文本直接显示在textarea中，不会转义为<p>测试内容&特殊符号</p>。
• 如果你习惯原生HTML的写法，将textarea内容写在开闭标签之间：普通文本插值{rawText}默认会做HTML转义，此时可以将{@html rawText}直接作为textarea的子节点使用，注意不要写在属性中

  <!-- 仅适合单向赋初始值场景，用户输入不会自动同步到变量 -->
  <textarea>{@html rawText}</textarea>
  

安全提示：@html会跳过Svelte的XSS防护，仅在你完全信任绑定内容的来源时使用，优先推荐使用属性绑定的写法，更符合Svelte开发规范，也没有XSS风险。

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