转义单引号不适用于数据属性

【问题标题】：Escaping single quotes not working for data attribute转义单引号不适用于数据属性
【发布时间】：2022-01-22 19:49:04
【问题描述】：

我有一个 javascript 数组，其中包含带有转义单引号 (\') 的字符串。我想将该数组包含在我 .append() 到正文的新元素的数据属性中。

var data = ['I\'m confused'];

$('body').append('<div data-data=\'' + JSON.stringify(data) + '\'></div>');

console.log($('div').data('data')); // -> "[\"I"

问题：读取数据属性时，数组损坏（"[\"I"）。

【问题讨论】：

标签： javascript jquery escaping

【解决方案1】：

\ 不是 HTML 中的转义字符。因此\' 中的' 将终止以' 字符分隔的属性值。

不要尝试手动转义字符串并将它们混合在一起以创建 HTML。

容易出错且难以维护。

改用 DOM 特性（或环绕它们的 jQuery API）。

var data = ['I\'m confused'];

const div = $('<div />').attr('data-data', JSON.stringify(data));

$('body').append(div);

console.log($('div').data('data'));

&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;

【讨论】：