javascript - 如何避免 HTML 文本在插入输入值时被破坏？

Question

我想用一些 html 文本替换隐藏输入的值，并将其作为纯文本发送到服务器。这是我的做法:

$('#div').append("<input type="hidden" value='<div><h1>Some text</h1><svg ...></svg></div>'");

问题是代码中断并将输入值作为 HTML 标记显示到我的模板中，这使得它在发送时无法供后端使用。

这是 jsfiddle:https://jsfiddle.net/Lindow/9p77afc3/2/ ，在检查时你会发现 svg 超出了输入的值，这就是我试图避免的。

如何解决这个问题？

Answer 1

您的 input 元素未隐藏。为其提供 type="hidden" 属性。

将其添加到问题中后，您会遇到不转义引号的问题。用反斜杠转义那些内部双引号，或使用单引号:

$('#div').append("<input type='hidden' value='<div><h1>Some text</h1><svg ...></svg></div>'");

在添加了 fiddle 的下一次编辑之后，它显示您在 svg 内容中包含单引号，并且您没有引用 value 属性的值。

这样做:

$('.elements').append("<div>hey : <input hidden value=\"" + "<svg ... </svg>" + "\"</div>");
//                                                    ^^                         ^^

更正的 fiddle :https://jsfiddle.net/9p77afc3/4/