Как правильно вставить HTML-код в JSON-файл?

Question

[ymfront]

Есть JSON-файл, данные из которого должны выводиться в HTML-файле:

{
    "lineOne": "Здесь&nbsp;длинный <br> текст",
    "lineTwo": "Кликните по <a href='https://google.com'>ссылке</a>"
}

Проблема в том, что в строке 1 текст имеет неразрывный пробел   и тег переноса <br>.
Во второй строке у нас ссылка.

Но при выводе в HTML данные выводятся, как текстовые строки, то есть HTML-теги не работают.

Как правильно записать данные, чтобы они выводились, как HTML, а не текст?

Comments

[Wispik]

как ты их выводишь?

[ThunderCat]

Wispik, Правильнее будет спросить как он их туда кладет, так как в представленном коде жсон кривой.

[Ivan Ustûžanin]

Как правильно записать данные, чтобы они выводились, как HTML, а не текст?

никак, если текст пихается в разметку через неподдерживающие хтмл способы, например textContent

Answer 1

[Aetae]

Ответ на твой вопрос: именно так как ты и записал. Задача решена.

Ответ на настоящий вопрос: изменить метод, которым ты выводишь этот json на страницу с вывода текста, на вывод html.
В зависимости от того чем ты пользуешься для вывода настройки будут разными, так что требуется больше информации. Если ты используешь ванилу - смени textContent\innerText\append на innerHTML\insertAdjacentHTML.

P.S. Если данные в этом json могут содержать пользовательские данные, а не только то что напишешь лично ты, то не забудь подключить библиотеки-санитайзеры, иначе тебе быстро всё сломают хацкеры.

Answer 2

[ThunderCat]

Очевидно что просто вставить текст в кавычки не является правильным способом формировать жсон. Нормальный жсон работает как положено.

Comments

[Rsa97]

С чего бы это? JSON по стандарту использует UTF-8 и не требует эскейпить символы за исключением двойных кавычек и спецсимволов

$json = <<<JSON
{
    "lineOne": "Здесь&nbsp;длинный <br> текст",
    "lineTwo": "Кликните по <a href='https://google.com'>ссылке</a>"
}
JSON;
print_r(json_decode($json));
// stdClass Object
// (
//     [lineOne] => Здесь&nbsp;длинный <br> текст
//     [lineTwo] => Кликните по <a href='https://google.com'>ссылке</a>
// )

const json = `{
    "lineOne": "Здесь&nbsp;длинный <br> текст",
    "lineTwo": "Кликните по <a href='https://google.com'>ссылке</a>"
}`;
console.log(JSON.parse($json));
// Object { lineOne: "Здесь&nbsp;длинный <br> текст", lineTwo: "Кликните по <a href='https://google.com'>ссылке</a>" }

[ThunderCat]

Rsa97, Подозреваю что в коде не используется JSON.parse, и в таком случае просто присвоение будет выводить совершенно другой код:

let cont1 = {
"line1":"Здесь&nbsp;длинный <br> текст",
"line2":"Кликните по <a href='https://google.com'>ссылке</a>"
};

console.log(cont1.line1 + cont1.line2);
//Здесь&amp;nbsp;длинный &lt;br&gt; текстКликните по &lt;a href='https://google.com'&gt;ссылке&lt;/a&gt;"

В чем и проблема. По этому тупо записать в кавычках значения строк не вариант.

[Rsa97]

ThunderCat, В чём проблема?

[ThunderCat]

Rsa97, У нас разный жаваскрипт?

[Rsa97]

ThunderCat, Это JSFiddle текcт коверкает.

[ThunderCat]

Rsa97, вокруг сплошное наобманывало (
В любом случае, не доверяю вручную прописанному жсону, тот же жсон прас уже какой-никакой способ нормализации, как минимум будет вываливаться ошибка. По прежнему считаю что проблема в сыром ручном жсоне, где "Здесь&nbsp;длинный <br> текст" действительно длинный текст какой-то фигней, нормальнов жсон не кладущийся. Хотя код нам так и не показали...