Замена символов переноса на <br>

130
02 сентября 2019, 09:30

Есть <span>Текст1\nТекст2</span>

Нужно на JavaScript заменить \n на перенос строки, чтобы в браузере вывелось:

Текст1
Текст2

Я так понял тут не просто <br> replace-ом вставить нужно, а ещё что-то по тегам.
Предложите самый простой путь.

Answer 1

Чтобы переданная внутрь элемента строка распарсилась как html, используйте innerHTML сеттер:

let elem=document.querySelector('span') 
elem.innerHTML=elem.innerHTML.replace(/\\n/g,'<br>')
<span>Луна\nсъела\nпеченьку</span>

Или если у вас реальные переносы строк, а не в виде текста:

let elem=document.querySelector('span') 
elem.innerHTML=elem.innerHTML.replace(/\n/g,'<br>')
<span>Луна 
съела 
печеньку</span>

Или без <br>ов:

let elem=document.querySelector('span') 
elem.innerHTML=elem.innerHTML.replace(/\\n/g,'\n')
span{ 
  white-space: pre-wrap; 
}
<span>Луна\nсъела\nпеченьку</span>

Answer 2

var foo = document.querySelectorAll("span"); 
 
for (var i = 0; i < foo.length; i++) { 
  if (foo[i].textContent.indexOf("\n")) { 
    foo[i].innerHTML = foo[i].innerHTML.replace(/\\n/g, "<br>"); 
  } 
}
<span>some text \n some text</span>

READ ALSO
Подружить OwlCarousel c NanoGallery2 и Bootstrap 4?

Подружить OwlCarousel c NanoGallery2 и Bootstrap 4?

Доброго всем времени суток

129
Как нажать на кнопку в форме через sweet alert

Как нажать на кнопку в форме через sweet alert

При использовании метода alert выскакивает окно подтверждения, жму в нем ок, после этого форма улетает и получаю ответ - 123Нужно сделать тоже...

110
Django. Взаимодействие Python c html-объектами

Django. Взаимодействие Python c html-объектами

Возможно ли в Django при помощи Phyton взаимодействовать с html-объектами на веб-странице чтобы обеспечить её интерактивность по принципам JavaScript?...

128
как в ajax вести всю информацию с .json методом fetch

как в ajax вести всю информацию с .json методом fetch

оно выводит [object Object],[object Object] а нужно всю ее информацию

114