javascript - 如果对象内容是用户生成的，如何正确转义对象的 JSON 字符串？

Question

我想使用 var s 作为选项元素的值字段。如何正确转义以包含用于键和值的用户输入？

var key='highway'; var value='track';
var s = JSON.stringfy({ [key]:value }, undefined,'');
s = s.replace(/'/g,'\\\'').replace(/"/g,'\\"');
var h = '<option type="text" value="' + s + '">'+key+'</option>';
// ...
document.getElementById('aSelectElement').innerHTML = h;

编辑:实际上我将它用作选项元素，而不是首先提到的输入元素。

如果我在浏览器中选择结果，并让它显示生成的 html，它会显示如下内容:

<option value="{\" highway\":\"track\"}"="">highway track</option>

这就增加了一个问题，为什么高速公路前面有一个空白？

Answer 1

我还建议使用 DOM 元素，而不是像其他答案中那样将 HTML 构建为字符串。但如果您确实不想这样做，您可以将 JSON 中的任何双引号转换为 HTML 实体 "，这样它们就不会终止 value属性。

var key = 'first';
var value = 'test';
var s = JSON.stringify({
  [key]: value
}, undefined, '').replace(/"/g, '"');
var h = '<input type="text" value="' + s + '">';
document.getElementById('aDiv').innerHTML = h;

<div id="aDiv"></div>