Какие могут быть причины, по которым JSON.parse не работает?

Question

Maya

javascript

Какие могут быть причины, по которым JSON.parse не работает?

Добрый день! <br/> У меня есть строка в формате JSON, которая включает SVG-разметку. <br/> <pre><code class="javascript">let text = `{"content":"&lt;svg width=\"133\" height=\"510\" viewBox=\"0 0 133 510\"&gt;"}`
let data: any = null;
try {
   data = JSON.parse(text);
} catch (e) {
    debugger
}</code></pre> <br/> При попытке разобрать эту строку с помощью JSON.parse возникает ошибка: <br/> <pre><code class="javascript">SyntaxError: Expected ',' or '}' after property value in JSON at position...</code></pre> <br/> Как выясняется, проблема, скорее всего, заключается в экранированных кавычках внутри SVG-разметки. Тем не менее, по моему мнению, экранирование выполнено корректно. <br/> Можете подсказать, как можно решить эту проблему?

4 февраля 2025 г. 7:24

Ответы на вопрос 2

Похожие вопросы

Answer 1

Ваша проблема связана с тем, как вы экранировали кавычки в JSON-строке. В JSON важно правильно экранировать символы, и здесь есть несколько нюансов, особенно когда вы работаете с символами, которые уже содержат экранирование, например, `\"`.

Вот ваша строка JSON:
```json
{"content":"&lt;svg width=\"133\" height=\"510\" viewBox=\"0 0 133 510\"&gt;"}
```

Обратите внимание на несколько моментов:
1. Вы использовали `&lt;` и `&gt;` для представления символов `<` и `>`. Это корректно, если вы хотите сохранить символы в HTML, но в JSON вы можете использовать обычные символы.
2. В JSON кавычки внутри строки должны быть экранированы с помощью обратного слеша `\`. 

Если вашу строку необходимо передать в JSON и вы хотите, чтобы SVG был представлен в виде текста, вы можете переписать вашу строку следующим образом:

```javascript
let text = `{"content":"<svg width=\\"133\\" height=\\"510\\" viewBox=\\"0 0 133 510\\">"}`;
```

В этом изменении я просто убрал `&lt;` и `&gt;` и правильно экранировал двойные кавычки `\"`. 

Теперь, если вы выполните:

```javascript
let data = null;
try {
   data = JSON.parse(text);
} catch (e) {
    console.error(e);
}
```

Это не приведет к ошибке, и объект `data` будет содержать ваш SVG в качестве строки в `content`.

Если вам нужно использовать `&lt;` и `&gt;`, то передайте их в другом контексте, но в случае JSON это не нужно.

Answer 2

<pre><code class="diff">- let text = `{"content":"&lt;svg width=\"133\" height=\"510\" viewBox=\"0 0 133 510\"&gt;"}`
+ let text = '{"content":"&lt;svg width=\\"133\\" height=\\"510\\" viewBox=\\"0 0 133 510\\"&gt;"}'</code></pre> <br/> Как получить правильный JSON: <br/> <pre><code class="javascript">console.log(JSON.stringify({content: '&lt;svg width="133" height="510" viewBox="0 0 133 510"&gt;'}))
// '{"content":"&lt;svg width=\\"133\\" height=\\"510\\" viewBox=\\"0 0 133 510\\"&gt;"}'</code></pre>