如果对象内容是用户生成的，如何正确转义对象的 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;

编辑：实际上我将它用于选项元素而不是前面提到的输入元素。

如果我在浏览器中 select 结果，让它显示生成的 html，它会显示如下内容：

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

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

Answer 1

无需将 HTML 构建为字符串；您可以创建输入元素并以编程方式设置其值：

// ...
var inputElem = document.createElement('input');
inputElem.type = 'text';
inputElem.value = s;
// ..
document.getElementById('aDiv').appendChild(inputElem);

请注意，这并不完全相同，因为设置 innerHTML 会删除 div 中的所有现有内容，但调用 appendChild 不会。如果确实需要替换已有的内容，可以先removing the existing child nodes

Answer 2

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

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

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

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

How to escape an JSON-string of an object correctly if the object content is user generated?

html

javascript

json

user-input

escaping