Отобразить перенос строк из json ответа

192

29 декабря 2018, 22:40

Получаю ответ ajax'ом от сервера в формате json такого вида: {"success":true,"data":{"answer":"first line\r\nsecond line boom\r\n123","answer_id":433}}

Потом раскидываю данные под местам при формировании html блока и вывожу, т.е. в нужном месте например +respose.data.answer+

Проблема в том, что текст в данном случае текст у меня сплошняком, т.е. пробелы есть, а переносы строк не отрабатывают.

Была мысль перед вставкой в html регуляркой прогнать и заменить \n на <br>, но, думаю, это явно неправильный вариант решения. Как быть?

Answer 1

Можно разбить строку методом .split() на массив и вывести каждую в своем теги <p>

<div id="app"></div> 
 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> 
 
<script> 
  const str = "first line\r\nsecond line boom\r\n123"; 
  const list = str.split(/\r\n/); 
 
  const $p = $('<p class="text" />'); 
  
  const paragraphs = list.map(txt => { 
    return $p.clone().text(txt); 
  }); 
 
  $('#app').append(paragraphs); 
</script>