如何在HTML input的value属性中存储包含单双引号的字符串

• 你存储的HTML内容中包含与value属性外层包裹符一致的引号，直接闭合了value属性，导致整个HTML结构断裂，所以内容直接暴露在页面上。
• 你尝试的两个方案本身不适配HTML属性场景：escape()是URL编码函数，仅适用于URL参数转义；反斜杠转义是JS语法规则，在原生HTML属性中完全不生效。

方案1：后端渲染时对内容做HTML实体转义（通用方案） #

这是最稳妥的适配方案，只需要将存入value的内容中的几个特殊字符替换为HTML实体即可：

• 把&替换为&
• 把双引号"替换为"
• 把单引号'替换为'
• 把<替换为<
• 把>替换为>

转义后的正确代码示例：

<input type="hidden" name="name" id="id1" value="&lt;p&gt;&lt;span style=&quot;font-family:&#39;Noto Sans JP&#39;;&quot;&gt;Enter text here.&lt;/span&gt;&lt;/p&gt;"/>

转义后浏览器会自动识别实体编码，表单提交时后端收到的是原始的HTML内容，无需额外解码。

方案2：JS动态赋值（前端操作场景首选） #

如果是在前端通过JS给input赋值，直接操作DOM的value属性即可，不需要手动做任何转义，JS会自动处理特殊字符的冲突问题：

const htmlContent = `<p><span style="font-family:'Noto Sans JP';">Enter text here.</span></p>`
document.getElementById('id1').value = htmlContent

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