javascript - 在 jQuery 插件设置中使用特殊字符？

Question

我正在使用的插件遇到了问题。我允许用户将一些文本传递给插件，如下所示:

data-plugin='{ "setting" : "hello world" }'

没有问题，直到引入特殊字符:

data-plugin='{ "setting" : "hello world, it's been awhile." }'

撇号只是停止一切并且不会引发任何错误。我不确定如何允许用户像平常一样输入此内容？

编辑:这是导致问题的确切属性:

data-plugin='{
   "foreground":"1_foreground.png", 
   "horizon":"50,120",
   "subtitle":"Hello world. It's been awhile.",
   "subtitle_speed":"3500,2000",
   "subtitle_color":"#ff5b00",
   "subtitle_pos":"bottom"
}'

编辑2:

当在设置中使用\' 时，会在插件内合并对象之前记录此信息:

{
       "foreground":"1_foreground.png", 
       "horizon":"50,120",
       "subtitle":"Hello world. \

紧接着，我使用 $.extend 来合并它，然后将其应用为数据。

这是如何设置的:

在大量元素上调用插件:

$('.el').plugin({ "setting1" : "value" });

在此处使用这些设置来修改它们:

<div class="el"></div>
<div class="el" data-plugin='{ "setting1" : "special value" }'></div>

无论如何，这不是问题。问题是试图在值中插入撇号。任何 HTML 元素上的单引号都是有效的。

谢谢!

Answer 1

data-plugin='{ "setting" : "hello world, it's been awhile." }'

由于您使用撇号包裹 JSON 字符串，因此需要对字符串内的撇号进行转义。

将其更改为:

data-plugin='{ "setting" : "hello world, it\'s been awhile." }'

编辑:好的，我想我知道你想要做什么，基于 data-plugin 是一个 html 属性:

我尝试使用 JSFIDDLE 进行重现，这就是我得到的结果:

<input type='hidden' data-plugin='{
   "foreground":"1_foreground.png", 
   "horizon":"50,120",
   "subtitle":"Hello world. It\'s been awhile.",
   "subtitle_speed":"3500,2000",
   "subtitle_color":"#ff5b00",
   "subtitle_pos":"bottom"
}'>

和 JavaScript

alert($('input').data('plugin'));

它会导致您在问题中指出的错误。

根据对您问题的第一条评论，我将撇号转义为 ' 并且当我运行时

alert($('input').data('plugin'));

我得到了正确的回应。这将提醒 JSON 对象，因此

alert($('input').data('plugin').foreground);

警报“1_foreground.png”。如果您想要将其转换回 JSON，则需要执行以下操作:

var jsonPluginSettings = JSON.stringify($('input').data('plugin'));