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

【问题标题】：How to prevent html attribute value from generating new line, my json string value breaks如何防止html属性值生成新行，我的json字符串值中断
【发布时间】：2018-07-13 22:05:07
【问题描述】：

我正在插入一个 json 字符串值作为按钮元素属性的值，比如下面

var $json = JSON.stringify('{"Long_text":"This is \'my json string and soon..."}');

$("#button_id").attr('data-json', $json);

这在我的某些页面中有效，但是当文本中有单引号时，即使它用斜杠转义，元素属性中的值也会创建换行符并中断喜欢：

<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 值时，会导致错误。

我找到了这个,"->Line break inside HTML tag attribute value" 我应该用这个 %0D%0A 替换空格吗？按照建议保留换行符或空格？

非常感谢任何帮助或建议！谢谢！

【问题讨论】：

我建议先尝试您自己提到的选项，最好尝试所有选项，因为它可能会起作用，然后您甚至不需要首先提出问题！ :)

标签： javascript html

【解决方案1】：

我找到了一个解决方案，而不是用这个 %0D%0A 替换空格从这个Line break inside HTML tag attribute value

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')));

谢谢！

【讨论】：