在jQuery插件设置中使用特殊字符?

时间:2014-05-07 23:00:33

标签: javascript jquery string encode

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

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元素的单引号都是有效的。

谢谢!

1 个答案:

答案 0 :(得分: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'));

它会导致您在问题中记下的错误。

根据您对问题的第一条评论,我将撇号转移到&apos;并在我运行时

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

我得到了适当的回应。这将警告JSON对象,所以

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

提醒“1_foreground.png”。要将其重新设置为JSON,如果这是您要执行的操作,则需要:

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