Как можно соблюдать новую строку при обновлении содержимого тега ‹pre›?

Увидев этот ответ, я попытался найти способ обновить содержимое <pre> и отображать новые строки с использованием неявных новых строк (т.е. в строке буквальный). Я пробовал устанавливать различные свойства: innerHTML, innerText, textContent, nodeValue (после проверки ответов на этот вопрос), но ни один из них не сохранил пробелы.

Я знаю, что могу использовать String.fromCharCode( ) — например, "Bob " + String.fromCharCode(10, 13) + "is "... но хотел найти способ использовать и прежний синтаксис.

//Perfectly valid code
var foo = "Bob \
is \
cool.";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});
<pre id="pre"></pre>

Есть ли способ обновить содержимое по желанию?


javascript html newline pre
person Sᴀᴍ Onᴇᴌᴀ    schedule 12.06.2017    source источник
comment
Используйте \n в строке   -  person epascarello    schedule 12.06.2017

Ответы (2)


arrow_upward
2
arrow_downward

Вы, кажется, неправильно поняли ответ, на который ссылались. В ответе говорится:

Если вы хотите, чтобы строка занимала несколько строк, вы можете вставить символ обратной косой черты '\' непосредственно перед завершением строки, например:

//Perfectly valid code
var foo = "Bob \
is \
cool.";

Однако эта строка не будет содержать \n символов в позициях, где строка была разбита на отдельные строки. Единственный способ вставить новую строку в строку — это вставить символ со значением 10, самый простой способ — escape-символ \n.

var foo = "Bob\nis\ncool.";

Итак, вот что вы должны делать вместо этого:

//Perfectly valid code
var foo = "Bob\nis\ncool.";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});
<pre id="pre"></pre>

Если вы хотите, чтобы оба разбивали строку на несколько строк, и чтобы в строке были символы новой строки, вам нужны оба варианта:

//Perfectly valid code
var foo = "Bob\n\
is\n\
cool.";
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});
<pre id="pre"></pre>

person BoltClock    schedule 12.06.2017

arrow_upward
1
arrow_downward

Другой способ сделать это — использовать литералы шаблонов. .

// template literal syntax
var foo = `Bob 
is 
cool.`;
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('pre').textContent = foo;
});
<pre id="pre"></pre>

person DonovanM    schedule 12.06.2017
comment
Мне это нравится! Я видел это в ответе DRS David Soft - person Sᴀᴍ Onᴇᴌᴀ; 12.06.2017
comment
Ах, я должен был прокрутить вниз, ха-ха - person DonovanM; 12.06.2017