2013-03-20 55 views
3

我试图解析JSON字符串,我不能得到它,因为非法chracters的工作 - 我无法找到...如何在存储为Javascript变量的HTML字符串中转义JSON?

以下是我有:

make = function (el) { 
    var config = el.getAttribute("data-config"); 
    console.log(config); 
    var dyn = $.parseJSON(config) 
    console.log(dyn); 
} 

var a= document.createElement("<a href='#' class='template' data-config=\"{'role':'button','iconpos':'left','icon':'star','corners':'false','shadow':'false', 'iconshadow':'false', 'theme':'a','class':'test', 'href':'index.html','text':'Star Icon', 'mini':'true', 'inline':'true'}\">Star Icon</a>"); 
console.log(a); 
make(a); 

我我真的不知道如何正确地使用原始字符串“a”来使用JSON,以便它能够正常工作。

问题:
我需要哪些引号才能让它起作用?

谢谢!

编辑:

确定。我想通过使用Jquery(我更喜欢使用Javascript)。这工作:

make = function (el) { 
    var config = el.attr("data-config"); 
     console.log(config); 
    var dyn = $.parseJSON(config) 
     console.log(dyn); 
} 

var c = $('<a href="#" class="template" data-config=\'{"role":"button","iconpos":"left","icon":"star","corners":"false","shadow":"false", "iconshadow":"false", "theme":"a","class":"test", "href":"index.html","text":"Star Icon", "mini":"true", "inline":"true"}\'>Star Icon</a>') 
console.log(c); 
make(c); 

所以逃避JSON字符串的开始/结束的报价,似乎这样的伎俩。实际的问题是我不能使用完整字符串document.createElement。我只能创建元素document.createElement(a),然后设置innerHTML。需要更多地了解这一点。

如果有人能告诉我一个Javascript的唯一途径是如何做到这一点,请让我知道。

谢谢!在属性

+0

您可以使用该网站来验证您的JSON:http://jsonlint.com/会告诉你,如果你有任何非法字符或不正确的标记 – 2013-03-20 19:56:15

+0

我觉得你的单引号需要用双引号 – 2013-03-20 19:57:41

+0

我知道Jsonlint。问题是,它抱怨两个引号。没有他们,JSON是正确的,但HTML语法是错误的。 – frequent 2013-03-20 19:58:15

回答

7

Strings and object keys in JSON must be double quoted.双引号是无效的,所以你需要escape them with &quot;

此外,你可能想要使用布尔型true/false而不是字符串"true"/"false"

var a = document.createElement('<a href="#" class="template" data-config="{&quot;role&quot;:&quot;button&quot;,&quot;iconpos&quot;:&quot;left&quot;,&quot;icon&quot;:&quot;star&quot;,&quot;corners&quot;:false,&quot;shadow&quot;:false,&quot;iconshadow&quot;:false,&quot;theme&quot;:&quot;a&quot;,&quot;class&quot;:&quot;test&quot;, &quot;href&quot;:&quot;index.html&quot;,&quot;text&quot;:&quot;Star Icon&quot;, &quot;mini&quot;:true,&quot;inline&quot;:true}\">Star Icon</a>'); 

注意,这是完全不可读和@millimoose's suggestion about just setting the attribute afterwards将在长期内使这更容易对付。

+0

确定。不知道。试。 – frequent 2013-03-20 20:00:56

相关问题