Как экранирование кавычки html атрибутов в json?

Question

[Andrey Suha]

Есть функция которая превращает в php объект или массив в строку и выводит ее в js.

ниже как я это делаю

<script>
<?php $str = json_encode($value);  ?>
var <?php echo $key?> = JSON.parse('<?php echo $str;?>'.replace(/\r?\n/g, ""));
</script>

Проблема в том в получаемом json может лежать html и собственно у атрибутов тегов есть двойные кавычки, что в результате приводит к Uncaught SyntaxError: Unexpected token w in JSON at position 469. Как можно за экранировать такие скобки?

UPD приведу полный код функции возможно это поможет лучше меня понять))

function VarToJS ($vars) {
        if(gettype($vars) !== "array") return; ?>
        <script type="application/javascript">
        <?php foreach ($vars as $key => $value): ?>
            <?php
                if (gettype($value) === "resource" || gettype($value) === "unknown type") continue;
                elseif (gettype($value) === "array" || gettype($value) === "object") {
                $str = json_encode($value);
            ?>
                var <?php echo $key?> = JSON.parse(`<?php echo $str;?>`.replace(/\r?\n/g, ""));
            <?php } elseif(gettype($value) === "boolean" ||
                           gettype($value) === "integer" ||
                           gettype($value) === "double" ||
                           gettype($value) === "NULL" ) {?>
                var <?php echo $key?> = <?php echo $value;?>;
            <?php } elseif(gettype($value) === "string") {?>
                var <?php echo $key;?> = "<?php echo $value;?>";
            <?php } ?>
        <?php endforeach; ?>
        </script>
        <?php
    }

Comments

[Alexey Hog]

А зачем вам JSON.parse? у вас же уже есть все данные.

<script>
  var <?php echo $key?> = <?php echo json_encode($value); ?>;
</script>

т.е. в переменной js будет уже распарсенный json

[Andrey Suha]

Алексей Скопин, не совсем понял Ваш вопрос суть функции в том что ей можно передать массив пар ключ значение, а она выведет на странице скрипт с переменными где ключи это названия переменной, а значения собственно из значения. Вот и получается что что бы провернуть это для массива или объекта нужно на сервере закодировать их в json, а на фронте распарсить этот json

[Andrey Suha]

Алексей Скопин, Перечитал и понял, json_encode делает из того что ему передали json, т.е. в понимании js это строка. JSON.parse нужен что бы получился js объект на фронте

[Alexey Hog]

Andrey Suha, Так вы же сразу в переменную js присваиваете, а не в тег в html выводите (что было бы правильнее) Поэтому там уже хранится готовый объект. Не нужен вам JSON.parse

[Andrey Suha]

Алексей Скопин, ем.. наверное я опять был неправильно понят.

а не в тег в html выводите (что было бы правильнее)

как бы не преследуется цель вернуть html в js для того что бы там с ним работать. Давайте на примере
скажем есть у нас такой абстрактный массив

$arr = ["id" => 12, "title" => "Some title", "author" => "Some author", content => '<div class="some-class"> some ather html </div>'];

далее хочу передать этот массив на фронт в js (знаю что можно для этого делать запросы на сервер, но вопрос сейчас не в этом) и например вывести его в консоль. Вот если я будет делать так как вы написали

<script>
  var arrayName = <?php echo json_encode($arr); ?>;
</script>

то при console.log(arrayName) // здесь будет строка

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

[Alexey Hog]

Andrey Suha, Вот вы привели пример, но вряд ли его запускали, т.к. сам массив содержит Warning.
оберните content в кавычки и попробуйте еще раз.
console.log(arrayName) будет содержать объект.
для верности попробуйте сделать console.log(arrayName.id) и посмотрите результат

[Andrey Suha]

Алексей Скопин, Действительно Вы правы, напишите в ответ отмечу верным. Если не сложно тыкните носом где почитать так получается, был уверен что json_encode кодирует в строку и на фронте мы получаем строку

[Alexey Hog]

Andrey Suha, Да, json_encode кодирует в строку, но здесь чуть другой случай.
Решение это хотя и рабочее, но какое-то костыльное и небезопасное.

Было бы лучше, если сначала подготовить данные в php и выплюнуть в js через html. что бы не мешать php и js.
т.е.
сначала php

$arr = ['id' => 12, 'title' => 'Some title', 'author' => 'Some author', 'content' => '<div class="some-class"> some ather html </div>'];

потом html

<div id="some" data-items="<?php echo htmlspecialchars(json_encode($arr)); ?>"></div>

и js

var data = document.querySelector('#some').dataset.items;
// и вот здесь вам уже понадобится JSON.parse
    var object = JSON.parse(data);
    console.log(object);

[Andrey Suha]

Алексей Скопин, оно обычно используется при разработке для вывода в консоль, мне как то удобнее чем var_dump, так что вопрос безопасности вроде как не стоит. Во всяком случае спасибо за помощь))

Answer 1

[Andrey Suha]

Спасибо Алексей Скопин решение оказалось весьма простым

<script>
  var <?php echo $key?> = <?php echo json_encode($value); ?>;
</script>

Answer 2

[ThunderCat]

json_encode($value); уже создает строку с экранированными кавычками. А ошибка у вас вроде к ним не относится.

Comments

[Andrey Suha]

Как раз к ним , ожидается что после " , будет идти запятая, двоеточие или закрывающая фигурная скобка, вот и ругается Unexpected token w

[ThunderCat]

Andrey Suha, так это же у вас уже после JSON.parse?

[Andrey Suha]

ThunderCat, да, сори может как то не корректно описал проблему) она именно в том что на стороне фронта строку не получается распарсиь

Answer 3

[Андрей]

\"

Comments

[Andrey Suha]

Ну это понятно, а как выбрать в строке все кавычки в которые не обернуты название пропов и их значения?

[Андрей]

json получается невалидный приходит? можно кусок проблемный из него?

[Andrey Suha]

Андрей,