Cant split data in JS after json_encode in PHP

I have the data in $chat and they are displayed but not in the order that I have tried to split. Splitting worked when give raw data, but not after passin $chat.

<?php  $chat = json_encode($row->transcript_text); ?>
    <script type="text/javascript">
function splitArray() {
var myStr = <?php echo $chat; ?>;
var strArray = myStr.split(/(?= \| \d)/);

// Display array values on page
    for (var i = 0; i < strArray.length; i++) {
        $("body").addClass('col-lg-offset-1').append("<h4>" + strArray[i] + "</h4>");
    }
}
splitArray();
    </script>

via Muharrem Smakiqi