2015-04-22 52 views
0

我试图编码oauth2 diagram作为json对象中的字符串。但是,当我使用内置的js parseJSON函数“解码”它的输出看起来破碎。任何想法为什么或如何编码它?如何将文本图编码为json?

Plunkr

function show(){ 
    var diagram = ' +----------+\ 
    | Resource |\ 
    | Owner |\ 
    |   |\ 
    +----------+\ 
      ^\ 
      |\ 
     (B)\ 
    +----|-----+   Client Identifier  +---------------+\ 
    |   -+----(A)-- & Redirection URI --->|    |\ 
    | User- |        | Authorization |\ 
    | Agent -|----(B)-- User authenticates -->|  Server |\ 
    |   |        |    |\ 
    |   |<---(C)--- Redirection URI ----<|    |\ 
    |   |   with Access Token  +---------------+\ 
    |   |   in Fragment\ 
    |   |        +---------------+\ 
    |   |----(D)--- Redirection URI ---->| Web-Hosted |\ 
    |   |   without Fragment  |  Client |\ 
    |   |        | Resource |\ 
    |  (F) |<---(E)------- Script ---------<|    |\ 
    |   |        +---------------+\ 
    +-|--------+\ 
     | |\ 
     (A) (G) Access Token\ 
     | |\ 
    ^ v\ 
    +---------+\ 
    |   |\ 
    | Client |\ 
    |   |\ 
    +---------+\ 
' 
    x = JSON.stringify(diagram) 
    document.write(JSON.parse(x)); 
} 

结果

+----------+ | Resource | | Owner | | | +----------+^| (B) +----|-----+ Client Identifier +---------------+ | -+----(A)-- & Redirection URI --->| | | User- | | Authorization | | Agent -|----(B)-- User authenticates -->| Server | | | | | | |<---(C)--- Redirection URI ----<| | | | with Access Token +---------------+ | | in Fragment | | +---------------+ | |----(D)--- Redirection URI ---->| Web-Hosted | | | without Fragment | Client | | | | Resource | | (F) |<---(E)------- Script ---------<| | | | +---------------+ +-|--------+ | | (A) (G) Access Token | |^v +---------+ | | | Client | | | +---------+ 

UPDATE:这不工作,要么

// Code goes here 

function show(){ 
    var diagram = ' +----------+\n\ 
    | Resource |\n\ 
    | Owner |\n\ 
    |   |\n\ 
    +----------+\n\ 
      ^\n\ 
      |\n\ 
     (B)\n\ 
    +----|-----+   Client Identifier  +---------------+\n\ 
    |   -+----(A)-- & Redirection URI --->|    |\n\ 
    | User- |        | Authorization |\n\ 
    | Agent -|----(B)-- User authenticates -->|  Server |\n\ 
    |   |        |    |\n\ 
    |   |<---(C)--- Redirection URI ----<|    |\n\ 
    |   |   with Access Token  +---------------+\n\ 
    |   |   in Fragment\n\ 
    |   |        +---------------+\n\ 
    |   |----(D)--- Redirection URI ---->| Web-Hosted |\n\ 
    |   |   without Fragment  |  Client |\n\ 
    |   |        | Resource |\n\ 
    |  (F) |<---(E)------- Script ---------<|    |\n\ 
    |   |        +---------------+\n\ 
    +-|--------+\n\ 
     | |\n\ 
     (A) (G) Access Token\n\ 
     | |\n\ 
    ^ v\n\ 
    +---------+\n\ 
    |   |\n\ 
    | Client |\n\ 
    |   |\n\ 
    +---------+\n\ 
' 
    x = JSON.stringify(diagram) 
    document.write("<p>"+ JSON.parse(x) +"</p>"); 
} 
+0

如果你输出到HTML,您将需要'空白:预包装'或'
'标签 – Eric

+0

@tags预包装似乎没有太大的帮助http://plnkr.co/edit/P6L0wGv5fMz7ZkgdnG7w?p=preview –

+1

这是因为'document.write'是可怕的并完全抹去文档的其余部分(如包含样式表的链接标记) – Eric

回答

1

在源代码中的换行上市是不是字符串本身的一部分。如果您希望它们成为字符串的一部分,则需要添加换行符(\n)。

如果您将字符串转换为JSON并将JSON转换回字符串,则可能会遇到其他问题,也可能不会遇到其他问题。但以上是您需要解决的第一个问题。

我所看到的解决多线怪异问题的一个诀窍是根本没有多线字符串,而是有一个字符串数组,其中每个字符串表示多行字符串中的一行。

+0

我不知道如果我得到这个权利,但突破人物似乎并没有工作。 http://plnkr.co/edit/P6L0wGv5fMz7ZkgdnG7w?p=preview –

0

white-space: pre修复问题

.pre { 
    white-space: pre; 
} 

新线也应该有休息字符(\n),所以一半功劳应该去特洛特