在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." }'

编辑：好的，我想我有一个主意，您正在根据数据插件作为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'));