如何处理JSON中的换行符?

423

我生成了一些 JSON 数据,想要在 JavaScript 中将其转换为对象。但是我一直收到错误信息,以下是我的代码:

var data = '{"count" : 1, "stack" : "sometext\n\n"}';
var dataObj = eval('('+data+')');

这给了我一个错误:

unterminated string literal

使用 JSON.parse(data),我看到类似的错误信息:“在Chrome中出现“Unexpected token ↵””,在Firefox和IE中出现“未终止的字符串文字”。

当我从sometext后面移除\n时,这两种情况下的错误都消失了。我似乎无法弄清楚为什么\n会导致evalJSON.parse失败。


30
尝试使用真正的 JSON 解析器而非 eval。 - Eric
想要提到的是,至少对于C#.NET而言,在服务器端转义字符并没有起作用(我猜测它们会被序列化层取消转义)。对我们有用的技巧是在客户端执行转义。 - Derpy
10个回答

502

这就是您想要的内容:

var data = '{"count" : 1, "stack" : "sometext\\n\\n"}';
你需要在字符串中转义\(将其变成双重\),否则它会成为JSON源代码中的新行,而不是JSON数据中的内容。

2
我曾经对JSON编码有些困惑,但是“在JSON源中会变成换行符而不是JSON数据”这句话让我明白了。 - amucunguzi
4
人们可能会认为转义\n就是将\(不知道如何在行内引用 \)转义为\\再加上n。实际上,\n是一个控制字符,用Unicode点\u000A表示。"\n""\u000A"完全相同。因此,转义\n就是转义\u000A。它的转义形式是\n,在JavaScript字符串中,我们应该使用\\来代表\,这就是为什么"\\n"是正确的答案。对于PowerShell而言,\``代替`是转义字符。新行字符用\n表示。ConvertTo-Json "`n"将得到"\n",而ConvertFrom-Json ‘"Line 1\nLine 2"’将把Line 1Line 2`分别放在两行。 - Wenpin CHOU

66

如果data不是字符串文字,您需要有一个函数将\n替换为\\n

function jsonEscape(str)  {
    return str.replace(/\n/g, "\\\\n").replace(/\r/g, "\\\\r").replace(/\t/g, "\\\\t");
}

var data = '{"count" : 1, "stack" : "sometext\n\n"}';
var dataObj = JSON.parse(jsonEscape(data));

生成的dataObj将会是:

Object {count: 1, stack: "sometext\n\n"}

3
你需要转义转义字符(例如.replace("\\n", "\\\\n")),我建议使用正则表达式来允许替换多个实例(例如.replace(/\n/g, "\\\\n"))。 - musefan
2
为什么需要转义转义字符?我的意思是像.replace("\n", "\\n")这样的东西应该可以很好地完成工作!例如,var test = [{"description":"Some description about the product. This can be multi-line text."}]; console.log(JSON.parse(test.replace(/\n/g, "\\n")));将完美地将对象输出到浏览器控制台,如[{"description":"Some description about the product.\nThis can be multi-line text."}] - Fr0zenFyr
5
这个回答首先构造了一个无效的JSON字符串(因为换行符是控制字符),然后尝试使用一系列不完整的替换来修复它(有超过3个控制字符)。最后,更糟糕的是,它还使用了"eval"函数。17个赞??? - Phil
@manish_s - 如果是不受信任的输入,那么它就是未经验证的数据,因此绝不能传递给evaleval有其使用情况,但永远不应该用于未经预先验证和隐含信任的数据。请将最后一行替换为var dataObj = JSON.parse(jsonEscape(data)); - Jules
1
需要转义的引号怎么办? - chill appreciator
显示剩余4条评论

42

简而言之:作者问题的解决方案。

您生成的json是错误的,因为其中一个值包含换行符。要生成表示(而不是包含)其中一个值中的换行符的json,可以使用以下方法:

使用String.raw文字:

var data = String.raw`{"count" : 1, "stack" : "sometext\n\n"}`;

或者JSON.stringify应用于JavaScript对象(它本身就是类似JSON的)。

var data = JSON.stringify({"count" : 1, "stack" : "sometext\n\n"});

由于某些原因,此处所有答案都集中在如何在JavaScript中解析JSON字符串表示上,这可能会使有关如何在实际JSON中表示换行符的问题变得混淆。 后者不依赖于语言。

基于问题标题:

如何处理JSON中的换行符?

假设您使用以下代码在node(也可以是任何语言)中解析JSON文件:


let obj = JSON.parse(fs.readFileSync('file.json'));
console.log(obj.mykey)

以下是 file.json 可能包含的每个内容的输出结果:

输入 1:

{
  "mykey": "my multiline
   value"
}

输出1:

SyntaxError: Unexpected token

输入2:

{
  "mykey": "my multiline\nvalue"
}

输出2:

my multiline
value

输入 3:

{
  "mykey": "my multiline\\nvalue"
}

输出 3:

my multiline\nvalue

结论1:

为了在json文件中表示换行,我们应该使用\n字符。要表示\n,我们应该使用\\n


如何使用JavaScript定义上述每个输入(而不是输入文件):

当我们需要在JavaScript中定义包含JSON的字符串时,由于\n对JavaScript也有特殊意义,所以情况会有所改变。但是请注意,String.raw字面量修复了这个问题。

输入1:

let input1 = '{"mykey": "my multiline\nvalue"}'

//OR
let input1 = `{
  "mykey": "my multiline
   value"
}`;
//(or even)
let input1 = `{
  "mykey": "my multiline\nvalue"
}`;

//OR
let input1 = String.raw`{
  "mykey": "my multiline
   value"
}`;

console.log(JSON.parse(input1).mykey);

//SyntaxError: Unexpected token
//in JSON at position [..]

输入 2:

let input2 = '{"mykey": "my multiline\\nvalue"}'

//OR
let input2 = `{
  "mykey": "my multiline\\nvalue"
}`;

//OR (Notice the difference from default literal)
let input2 = String.raw`{
  "mykey": "my multiline\nvalue"
}`;

console.log(JSON.parse(input2).mykey);

//my multiline
//value

输入 3:

let input3 = '{"mykey": "my multiline\\\\nvalue"}'

//OR
let input3 = `{
  "mykey": "my multiline\\\\nvalue"
}`;

//OR (Notice the difference from default literal)
let input3 = String.raw`{
  "mykey": "my multiline\\nvalue"
}`;

console.log(JSON.parse(input3).mykey);

//my multiline\nvalue

结论 2:

在 JavaScript 中定义 json 字符串的最简单方法是使用 String.raw,因为它不需要任何转义(除了反引号之外,反引号可以这样转义:String.raw`abc${"`"}def`)。

当然,在 JavaScript 中创建 json 的最简单方法是将 JavaScript 对象转换为 json(使用 JSON.stringify)。


重要提示:

不要被 chrome/firefox 开发工具预览变量时包含换行符的方式所困扰(例如,当您只写变量名称并按下 Enter 时)。当预览对象时,它们总是表示字符串值的换行符,例如 \n。但是,当预览字符串时(例如 dataObj.stack),firefox 会将换行符显示为空行,而 chrome 仍会将其显示为 \n。因此,为了安全起见,您应始终使用 console.log(dataObj.stack) 进行预览,以更好地了解特定变量内实际包含的内容。


这是正确的,但是正如@jerryurenaa指出的那样,您需要在显示JSON的任何地方处理空格。 - tfantina
1
@tfantina 作者的问题是关于解析。渲染是另一回事。解析json可能在没有html视图的情况下进行。我想在我的答案中指出的是,在纯json中,换行符表示为\n(按规范),而在javascript字符串定义中,json换行符需要转义为\\n。最后,换行字节不是字符串类型的json值内的有效字符。 - Marinos An
这个答案解释了如何处理.json文件中的换行符。虽然它不是针对OP问题的答案,但很多使用.json文件的人都会来到这里。 - Mohammed Shareef C

14
根据规范http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf,一个字符串是由带引号(U+0022)的Unicode代码点序列组成。引号内可以放置所有字符,除了必须转义的字符:引号(U+0022)、反斜杠(U+005C)和控制字符U+0000U+001F。对一些字符有两个字符的转义序列表示。因此,不能直接传递0x0A0x0C代码。规范建议使用转义序列来表示从U+0000U+001F的某些明确定义的代码。
  • \f 代表换页符(U+000C)。
  • \n 代表换行符(U+000A)。

由于大多数编程语言使用 \ 进行引号,因此您应该转义转义语法(双重转义-一次用于语言/平台,一次用于 JSON 本身):

jsonStr = "{ \"name\": \"Multi\\nline.\" }";

1
在JSON文件本身中,似乎应该使用\n而不是\n,因为在http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf中它说:“有一些字符的两个字符转义序列表示... \r代表回车符(U+000D)...” - George Birbilis

5

其实用一个 CSS 类就可以简单地实现这个功能,所以没有必要为此创建一个函数。

只需将你的文本包裹在这个类中,就能看到奇妙的效果 :D

 <p style={{whiteSpace: 'pre-line'}}>my json text goes here \n\n</p>

注意:由于你将始终在前端以HTML形式呈现文本,因此你可以将style={{whiteSpace: 'pre-line'}}添加到任何标签中,而不仅仅是p标签。


正确的语法为:white-space: pre-line; - Shurvir Mori
@ShurvirMori:在 CSS 中是这样的。但在这里似乎使用的是 React,那么就采用驼峰命名法。 - Sinus the Tentacular
@SinustheTentacular,抱歉,我对此一无所知。 - Shurvir Mori

3

例如,当您写入JSON字段的值时,在服务器上可以对字符串进行转义,在客户端浏览器中检索该值时再进行反转义。

所有主要浏览器的JavaScript实现都有反转义命令。

例:

在服务器上:

response.write "{""field1"":""" & escape(RS_Temp("textField")) & """}"

在浏览器中:
document.getElementById("text1").value = unescape(jsonObject.field1)

2
你可能想要查看这个 C# 函数来转义字符串:

http://www.aspcode.net/C-encode-a-string-for-JSON-JavaScript.aspx

public static string Enquote(string s)  
{ 
    if (s == null || s.Length == 0)  
    { 
        return "\"\""; 
    } 
    char         c; 
    int          i; 
    int          len = s.Length; 
    StringBuilder sb = new StringBuilder(len + 4); 
    string       t; 

    sb.Append('"'); 
    for (i = 0; i < len; i += 1)  
    { 
        c = s[i]; 
        if ((c == '\\') || (c == '"') || (c == '>')) 
        { 
            sb.Append('\\'); 
            sb.Append(c); 
        } 
        else if (c == '\b') 
            sb.Append("\\b"); 
        else if (c == '\t') 
            sb.Append("\\t"); 
        else if (c == '\n') 
            sb.Append("\\n"); 
        else if (c == '\f') 
            sb.Append("\\f"); 
        else if (c == '\r') 
            sb.Append("\\r"); 
        else 
        { 
            if (c < ' ')  
            { 
                //t = "000" + Integer.toHexString(c); 
                string t = new string(c,1); 
                t = "000" + int.Parse(tmp,System.Globalization.NumberStyles.HexNumber); 
                sb.Append("\\u" + t.Substring(t.Length - 4)); 
            }  
            else  
            { 
                sb.Append(c); 
            } 
        } 
    } 
    sb.Append('"'); 
    return sb.ToString(); 
} 

3
为什么这个逃逸字符 > 会生效? - nothingisnecessary

0

我使用了这个函数来去除数据中的换行符或其他字符,以解析 JSON 数据:

function normalize_str($str) {

    $invalid = array(
        'Š'=>'S', 'š'=>'s',  'Đ'=>'Dj', 'đ'=>'dj', 'Ž'=>'Z', 'ž'=>'z',
        'Č'=>'C', 'č'=>'c',  'Ć'=>'C',  'ć'=>'c',  'À'=>'A', 'Á'=>'A', 'Â'=>'A', 'Ã'=>'A',
        'Ä'=>'A', 'Å'=>'A',  'Æ'=>'A',  'Ç'=>'C',  'È'=>'E', 'É'=>'E', 'Ê'=>'E', 'Ë'=>'E',
        'Ì'=>'I', 'Í'=>'I',  'Î'=>'I',  'Ï'=>'I',  'Ñ'=>'N', 'Ò'=>'O', 'Ó'=>'O', 'Ô'=>'O',
        'Õ'=>'O', 'Ö'=>'O',  'Ø'=>'O',  'Ù'=>'U',  'Ú'=>'U', 'Û'=>'U', 'Ü'=>'U', 'Ý'=>'Y',
        'Þ'=>'B', 'ß'=>'Ss', 'à'=>'a',  'á'=>'a',  'â'=>'a', 'ã'=>'a', 'ä'=>'a', 'å'=>'a',
        'æ'=>'a', 'ç'=>'c',  'è'=>'e',  'é'=>'e',  'ê'=>'e', 'ë'=>'e', 'ì'=>'i', 'í'=>'i',
        'î'=>'i', 'ï'=>'i',  'ð'=>'o',  'ñ'=>'n',  'ò'=>'o', 'ó'=>'o', 'ô'=>'o', 'õ'=>'o',
        'ö'=>'o', 'ø'=>'o',  'ù'=>'u',  'ú'=>'u',  'û'=>'u', 'ý'=>'y', 'ý'=>'y', 'þ'=>'b',
        'ÿ'=>'y', 'Ŕ'=>'R',  'ŕ'=>'r',
        "`" => "'", "´" => "'",  '"' => ',',  '`' => "'",
        '´' => "'", '"' => '\"', '"' => "\"", '´' => "'",
        "&acirc;€™" => "'",
        "{" => "",
        "~" => "",  "–" => "-",  "'" => "'",  "     " => " ");

    $str = str_replace(array_keys($invalid), array_values($invalid), $str);

    $remove = array("\n", "\r\n", "\r");
    $str = str_replace($remove, "\\n", trim($str));

    //$str = htmlentities($str, ENT_QUOTES);

    return htmlspecialchars($str);
}

echo normalize_str($lst['address']);

11
大多数语言都有更好的方法来从 Unicode 字符串中去除重音符号,而不是编写自己的映射函数。请参考以下 Python 示例提问:https://dev59.com/8HRB5IYBdhLWcg3wxZ7Y - MiniQuark
我们有许多方法来控制不同语言中的特殊字符。 - ShivarajRH
2
总的来说,将它们剥离是一种不好的做法。最好将它们编码为XML数字字符引用,然后在接收端解码。 - Annarfych

-1
我在编写一个 PHP 4 类来模拟 json_encode(PHP 5 中可用)时遇到了问题。这是我想出的解决方案:
class jsonResponse {
    var $response;

    function jsonResponse() {
        $this->response = array('isOK'=>'KO', 'msg'=>'Undefined');
    }

    function set($isOK, $msg) {
        $this->response['isOK'] = ($isOK) ? 'OK' : 'KO';
        $this->response['msg'] = htmlentities($msg);
    }

    function setData($data=null) {
        if(!is_null($data))
            $this->response['data'] = $data;
        elseif(isset($this->response['data']))
            unset($this->response['data']);
    }

    function send() {
        header('Content-type: application/json');
        echo '{"isOK":"' . $this->response['isOK'] . '","msg":' . $this->parseString($this->response['msg']);
        if(isset($this->response['data']))
            echo ',"data":' . $this->parseData($this->response['data']);
        echo '}';
    }

    function parseData($data) {
        if(is_array($data)) {
            $parsed = array();
            foreach ($data as $key=>$value)
                array_push($parsed, $this->parseString($key) . ':' . $this->parseData($value));
            return '{' . implode(',', $parsed) . '}';
        }
        else
            return $this->parseString($data);
    }

    function parseString($string) {
            $string = str_replace("\\", "\\\\", $string);
            $string = str_replace('/', "\\/", $string);
            $string = str_replace('"', "\\".'"', $string);
            $string = str_replace("\b", "\\b", $string);
            $string = str_replace("\t", "\\t", $string);
            $string = str_replace("\n", "\\n", $string);
            $string = str_replace("\f", "\\f", $string);
            $string = str_replace("\r", "\\r", $string);
            $string = str_replace("\u", "\\u", $string);
            return '"'.$string.'"';
    }
}

我遵循了这里提到的规则。我只使用了我需要的内容,但我认为你可以根据你所使用的语言来适应它。在我的情况下,问题不是像我最初想的那样关于换行符,而是关于未转义的/。我希望这能防止其他人像我一样头疼地弄清楚自己错在哪里。


2
json.org 上指定的 6 个控制字符简写并不是所有控制字符的详尽列表。因此,该函数可能会生成无效的 JSON。 - Phil

-5

根据我的理解,您的问题不是关于解析JSON,因为您可以直接将JSON复制粘贴到代码中 - 如果是这种情况,那么只需将JSON直接复制到dataObj变量中,而无需用单引号包装它(提示:eval==evil

var dataObj = {"count" : 1, "stack" : "sometext\n\n"};

console.log(dataObj);


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接