Использование лезвия внутри функции JavaScript, когда вывод должен быть HTML

Question

Проблема, с которой я столкнулся, связана с escape-html внутри функции javascript, переданной из blade-сервера.$ message содержит базовый HTML или строки с кавычками, поэтому, если я использую {!!!!} это не работает, потому что кажется, что вывод от лезвия в функцию должен быть в кавычках.

Внутри тега сценария JavaScript

@foreach ($messages as $message)
        addMessages('{{$message['message']}}', '{{$message['message_side']}}');
        @endforeach

функция JavaScript addMessages

addMessages = function (text, message_side) {
                var $messages, message;
                if (text.trim() === '') {
                    return;
                }
                $('.message_input').val('');
                $messages = $('.messages');
                message = new Message({
                    text: text,
                    message_side: message_side
                });
                message.draw();
                return $messages.animate({ scrollTop: $messages.prop('scrollHeight') }, 300);
            };

Answer 1

Таким образом, я считаю, что проблема заключается в двойном экранировании: сначала данные экранируются Blades с помощью вызова htmlspecialchars() (согласно docs ), а позже они экранируются где-то в коде JS (их нельзя экранироватьнапрямую, а не как текст через createTextNode(message) или innerText = message).

Так что вам нужно отключить один из этих escape-вызовов.

Как вы упоминали, вы можете использовать { !! } длявывод необработанного текста на стороне Blade.И да, это все еще должно быть заключено в кавычки (одинарные или двойные), чтобы быть действительным кодом JS.Но вам следует позаботиться о кавычках одинакового типа (одинарных или двойных) внутри вашего текста, чтобы пропустить такой регистр:

addMessage('It's me. I'm broken')

Чтобы добиться этого, вы можете просто экранировать знак кавычки вручную с косой чертой дляполучить что-то вроде

addMessage('It\'s me. I\'m broken')

[UPD], как @Ian Fain упомянул, что можно вызывать функции прямо внутри { !! } Так, наконец, это экранирование может быть выполнено без какой-либо пользовательской директивы, такой же простой, как

@foreach ($messages as $message)
    addMessages({!! json_encode($message['message']) !!}, {!! json_encode($message['message_side']) !!})
@endforeach

Также упомяните, json_encode добавляет дополнительные двойные кавычки, поэтому их больше не нужно вставлять напрямую.