Как перенести текст в «pre», учитывая переносы строк?

Question

[photosho]

Нужно все теги "br" заменить на переносы строки и записать этот текст в "pre". Делаю следующим образом, но текст попадает в "pre" без переносов. Подскажите, что я делаю не так.

<pre></pre>
<div style="display: none">
  <p>Строка 1<br/>Строка 2</p>
</div>

$(document).ready(function() {
  $('\n').replaceAll('div br');
  
  var
    text = $('div').text();
  
  $('pre').text(text);
  console.log(text);
});

https://codepen.io/photosho/pen/wvmxoeX?editors=1010

Answer 1

[cssfish]

1.

$(document).ready(function() {
  $('div br').replaceWith('\n');
  var text = $('div').text().trim();
   $('pre').text(text);
});

2.

$(document).ready(function() {
  var text = $('div').html().trim().replace("<br>", "\n").replace("<p>", "").replace("</p>", "");
  $('pre').text(text);
});

3.

$(document).ready(function() {
  var text = $('div').clone().find("br").replaceWith("\n").end().text().trim(); // clone чтоб документ не портить
  $('pre').text(text);
});

Почему replaceAll не сработало, не знаю. По идее это reverse - функция для replaceWith и работать должна идентично. В любом случае, лучше не влиять на исходный html и обработку строк делать внутри js. Вариант 3 например