When formatting JSON using JavaScript I get an error because of the " (double quote) flag in th-CodePudding

I using the following snippet, I'm legibly displaying all JSON strings in <pre> tag with id="jsonText" on the page.

var p = document.querySelectorAll("#jsonText");

var parray = [...p]

parray.forEach(p => {
var data = p.textContent;

p.textContent = JSON.stringify(JSON.parse(data), null, 2);
});

However, I get an error when there are double quotes (") in the data.

NOTE: The problematic field in the JSON is the "hardcore" part in the value of the "description" key.

Error:

jquery.min.js:2 Uncaught SyntaxError: Expected ',' or '}' after property value in JSON at position 289
    at JSON.parse (<anonymous>)
    at getNews:152:33
    at Array.forEach (<anonymous>)
    at HTMLDocument.<anonymous> (getNews:143:20)
    at e (jquery.min.js:2:30005)
    at t (jquery.min.js:2:30307)
(anonymous) @ getNews:152
(anonymous) @ getNews:143
.
.
.

I tried various RegEx methods to correct the double quotes, but these methods caused insertions where escape characters should not be inserted, or they did not work at all.

This is the JSON text in <pre> tag. (The fields are being filled by Golang's Template.)

<pre id="jsonText">{"guid": "{{.ID}}", "title": "{{.Title}}", "url": "{{.URL}}", "description": "{{.Description}}", "sourcename": "{{.SourceName}}", "sourceurl": "{{.SourceURL}}", "imageurl": "{{.ImageURL}}", "language": "{{.Language}}", "location": "{{.Location}}", "time": {{.Time}}, "tags": "{{.Tags}}", "type": {{.Type}}}</pre>

I tried the Method 1:

var escapedData = data.replace(/\"/g, "\\\"");
console.log("Escaped JSON: ", escapedData);
jsonData = JSON.parse(escapedData);
p.textContent = JSON.stringify(jsonData, null, 2);
console.log("Fixed JSON: ", p.textContent);

NOTE: The problematic field in the JSON is the "hardcore" part in the value of the "description" key.

Input:

{
"guid": "https://www.bbc.co.uk/news/business-63648505", 
"title": "Elon Musk tells Twitter staff to work long hours or leave", 
"url": "https://www.bbc.co.uk/news/business-63648505?at_medium=RSS&at_campaign=KARANGA", 
"description": "Elon Musk says workers at the social media firm must be "hardcore" if they want to stay, reports say.", 
"sourcename": "BBC", 
"sourceurl": "https://www.bbc.com/news", 
"imageurl": "https://www.bbc.com/news/special/2015/newsspec_10857/bbc_news_logo.png?cb=1", 
"language": "EN", 
"location": "UK", 
"time": 1668616715, 
"tags": "", 
"type": 2
}

Output:

Escaped JSON:  {\"guid\": \"https://www.bbc.co.uk/news/business-63648505\", \"title\": \"Elon Musk tells Twitter staff to work long hours or leave\", \"url\": \"https://www.bbc.co.uk/news/business-63648505?at_medium=RSS&at_campaign=KARANGA\", \"description\": \"Elon Musk says workers at the social media firm must be \"hardcore\" if they want to stay, reports say.\", \"sourcename\": \"BBC\", \"sourceurl\": \"https://www.bbc.com/news\", \"imageurl\": \"https://www.bbc.com/news/special/2015/newsspec_10857/bbc_news_logo.png?cb=1\", \"language\": \"EN\", \"location\": \"UK\", \"time\": 1668616715, \"tags\": \"\", \"type\": 2}

I tried Method 2:

var escapedData = data.replace(/"([^"] )"/g, function(match, capture) {
 return '"'   capture.replace(/"/g, "\\\"")   '"';
});
jsonData = JSON.parse(escapedData);
p.textContent = JSON.stringify(jsonData, null, 2);
console.log("Fixed JSON: ", p.textContent);

The output was same as the input, at Method 2.

All I want is that the JSON text look like this.

Thanks in advance for your help.

CodePudding user response：

Since you use a Goland template with Handlebars your JSON format will fail if the Description field contains quotes, as you describe. Your expanded string:

    "description": "Elon Musk says workers at the social media firm must be "hardcore" if they want to stay, reports say.",

needs to be escaped to:

    "description": "Elon Musk says workers at the social media firm must be \"hardcore\" if they want to stay, reports say.",

I am not familiar with Handlebars for Golang, but assuming it is compatible with regular Handlebars you can register a helper function to properly escape double quotes for use like:

    "description": "{{{escapeQuotes .Description}}}",

Define the helper function to escape quotes as follows:

Handlebars.registerHelper('escapeQuotes', function (aString) {
    return aString.replace(/"/g, '\\"');
});

You can try this out at the Handlebars playground at https://handlebarsjs.com/playground.html