Question

我正在尝试将oauth2 diagram编码为json对象中的字符串。然而，当我使用内置的js parseJSON函数“解码”它时，输出看起来很糟糕。知道为什么或如何编码它？

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 | | | +---------+

更新：这不起作用

// 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>");
}

Answer 1

源代码清单中的换行符不是字符串本身的一部分。如果希望它们成为字符串的一部分，则需要添加换行符（\n）。

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

我见过一个解决多线怪异问题的技巧是根本没有多线字符串，而是有一个字符串数组，其中每个字符串代表多行字符串中的一行。

Answer 2

white-space: pre解决了问题

.pre {
    white-space: pre;
}

新行也应该有中断字符（\n），所以一半的功劳应归功于Trott

如何将文本图编码为json？

2 个答案: