如何防止html属性值生成新行，我的json字符串值中断

Question

我正在插入一个json字符串值作为按钮元素属性的值，例如低于

var $json = JSON.stringify('{"Long_text":"This is 'my json string and soon..."}');
$("#button_id").attr('data-json', $json);

这在我的一些页面中是有效的，但当文本中有一个引号时，即使它是用斜线转义的，element属性中的值也会创建换行符并中断类似：

<button data-json="{"Long_text":"This is ' "
"my json string and soon..."}" >Click</button>

我试过使用

replace('/r?n|r|n/g/',''); //to replace multiple newlines

即使我替换了双空格，它也不起作用，因为属性本身格式不正确。因此，当我获取属性并尝试解析json值时，它会导致一个错误。

我发现，"->HTML标记属性值内的换行符"我应该用这个%0D%0A替换空格吗？如建议保留换行符或空格？

我们非常感谢您的帮助或建议！谢谢

Answer 1

我找到了一个解决方案，而不是用这个%0D%0A替换空格HTML标记属性值内的换行符

var base64 =
{
encode: function utoa(str)
{
return window.btoa(unescape(encodeURIComponent(str)));
},
decode: function atou(str)
{
return decodeURIComponent(escape(window.atob(str)));
}
}

我试过了，它很有效，它还使字符串不可读，因为它是base64_encoded，它避免了空格和引号引起的换行。

var $json = base64.encode(JSON.stringify('{"Long_text":"This is 'my json string and soon..."}'));
$("#button_id").attr('data-json', $json);

然后获取值并再次转换，

var valid_json = JSON.parse(base64.decode($("#button_id").attr('data-json')));

谢谢！