Подтвердить что ты не робот

Как вставить новую строку/возврат каретки в element.textContent?

Как ни глупо, как может показаться, я до сих пор не нашел подходящего ответа.

Скажем, я хочу динамически создать новый элемент DOM и заполнить его textContent/innerText с строковым литералом JS.
Строка так долго, я хотел бы разбить ее на три части:

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

Проблема в том, что если я пишу

h1.textContent = "...I would like to insert a carriage return here... \n";

он не работает, возможно, потому, что браузер считает, что "\n" является чистым текстом и отображает его как таковой (\ r тоже не работает).

С другой стороны, я могу изменить h1.innerHTML вместо textContent и написать:

h1.innerHTML = "...I would like to insert a carriage return here...<br />";

Здесь < br/ > выполнит эту работу, но это заменит не только текстовое содержимое, но и весь контент HTML моего h1, что не совсем то, что я хочу.

Есть ли простой способ решить мою проблему?
Я бы не прибегал к созданию нескольких элементов блока, чтобы иметь текст на разных строках.

Любая идея была бы весьма признательна.

Спасибо заранее.

4b9b3361

ОТВЕТЫ

Ответ 1

Я знаю этот вопрос, который был опубликован давно.

У меня была аналогичная проблема несколько дней назад, передав значение из веб-службы в формате json и поместив ее в table cell contentText.

Поскольку значение передается в формате, например, "text row1\r\ntext row2" и т.д.

Для новой строки в textContent Вы должны использовать \r\n, и, наконец, мне пришлось использовать css white-space: pre-line; (текст будет обернут, когда это необходимо, и на разрыве строки), и все будет хорошо.

Или вы можете использовать только white-space: pre;, а затем текст будет переноситься только на разрывы строк (в этом случае \r\n).

Итак, есть пример, как решить проблему с текстом обтекания только при разрыве строк:

var h1 = document.createElement("h1");

//setting this css style solving problem with new line in textContent
h1.setAttribute('style', 'white-space: pre;');

//add \r\n in text everywhere You want for line-break (new line)
h1.textContent = "This is a very long string and I would like to insert a carriage return \r\n...";
h1.textContent += "moreover, I would like to insert another carriage return \r\n...";
h1.textContent += "so this text will display in a new line";

document.body.appendChild(h1);

Ответ 2

Я столкнулся с этим некоторое время назад. Я нашел хорошее решение, чтобы использовать представление ASCII возвратов каретки (CODE 13). У JavaScript есть удобная функция под названием String.fromCharCode(), которая генерирует строчную версию кода ASCII или несколько кодов, разделенных запятой. В моем случае мне нужно было создать CSV файл из длинной строки и записать его в текстовую область. Мне нужно было разрезать текст из текстовой области и сохранить его в блокноте. Когда я попытался использовать метод <br />, он не сохранил бы возврат каретки, однако, используя метод fromCharCode, он сохраняет возвращаемые значения. Смотрите мой код ниже:

h1.innerHTML += "...I would like to insert a carriage return here..." + String.fromCharCode(13);
h1.innerHTML += "Ant the other line here..." + String.fromCharCode(13);
h1.innerHTML += "And so on..." + String.fromCharCode(13);
h1.innerHTML += "This prints hello: " + String.fromCharCode(72,69,76,76,79);

Подробнее об этом методе см. здесь w3Schools-fromCharCode()

Смотрите здесь коды ASCII: Коды ASCII

Ответ 3

Вы можете использовать регулярные выражения, чтобы заменить символы '\n' или '\n\r' на '< br/ > '.

У вас есть это:

var h1 = document.createElement("h1");

h1.textContent = "This is a very long string and I would like to insert a carriage return HERE...
moreover, I would like to insert another carriage return HERE... 
so this text will display in a new line";

вы можете заменить своих персонажей следующим образом:

h1.innerHTML = h1.innerHTML.replace(/\n\r?/g, '<br />');

проверьте ссылку javascript для объектов String и Regex:

http://www.w3schools.com/jsref/jsref_replace.asp

http://www.w3schools.com/jsref/jsref_obj_regexp.asp

Ответ 4

Вы можете объединить строки...

h1.innerHTML += "...I would like to insert a carriage return here...<br />";
h1.innerHTML += "Ant the other line here... <br />";
h1.innerHTML += "And so on...<br />";

jsFiddle.

Ответ 5

Используйте element.innerHTML="some \\\\n some";.

Ответ 6

Ни один из вышеперечисленных решений не работал у меня. Я пытался добавить строку и дополнительный текст в элемент <p>. Обычно я использую Firefox, но мне нужна совместимость с браузером. Я прочитал, что только Firefox поддерживает свойство textContent, только Internet Explorer поддерживает свойство innerText, но оба поддерживают свойство innerHTML. Однако ни добавление <br />, ни \n, ни \r\n к любому из этих свойств не привело к новой строке. Однако следующее:

<html>
<body>
<script type="text/javascript">
  function modifyParagraph() {

  var p;
  p=document.getElementById("paragraphID");
  p.appendChild(document.createElement("br"));
  p.appendChild(document.createTextNode("Additional text."));
}    
</script>

<p id="paragraphID">Original text.</p>

<input type="button" id="pbutton" value="Modify Paragraph" onClick="modifyParagraph()" />
</body>
</html>

Ответ 7

Я обнаружил, что вставка \\n работает. I.e., вы избегаете экранированного символа новой строки

Ответ 8

Следующий код работает хорошо (в FireFox, IE и Chrome):

var display_out = "This is line 1" + "<br>" + "This is line 2";

document.getElementById("demo").innerHTML = display_out;

Ответ 9

Ответ nelek - лучший, опубликованный до сих пор, но он полагается на установку значения css: white-space: pre, что может быть нежелательным.

Я хотел бы предложить другое решение, которое пытается решить настоящий вопрос, который должен был быть задан здесь:

"Как вставить ненадежный текст в элемент DOM?"

Если вы доверяете тексту, почему бы просто не использовать innerHTML?

domElement.innerHTML = trustedText.replace(/\r/g, '').replace(/\n/g, '<br>');

должно быть достаточным для всех разумных случаев.

Если вы решили использовать.textContent вместо.innerHTML, значит, вы не доверяете тексту, который вы собираетесь вставить, не так ли? Это вызывает озабоченность.

Например, у вас есть форма, в которой пользователь может создать сообщение, и после его публикации пост-текст сохраняется в вашей базе данных, а затем добавляется к страницам, когда другие пользователи посещают соответствующую страницу.

Если вы используете innerHTML здесь, вы получаете нарушение безопасности. т.е. пользователь может публиковать что-то вроде

[script]alert(1);[/script]

(попытайтесь представить, что [] <>, очевидно, что переполнение стека добавляет текст небезопасными способами!)

который не будет вызывать предупреждение, если вы используете innerHTML, но он должен дать вам представление, почему использование innerHTML может иметь проблемы. более умный пользователь будет публиковать

[img src="invalid_src" onerror="alert(1)"]

который будет вызывать предупреждение для каждого другого пользователя, который посещает страницу. Теперь у нас есть проблема. Еще более умный пользователь поставил бы дисплей: none в этом стиле img и запустил бы текущие файлы cookie пользователя на сайт с перекрестным доменом. Поздравляем, все ваши данные для входа в систему теперь доступны в Интернете.

Итак, важно понять, что использование innerHTML не является неправильным, оно идеально подходит, если вы просто используете его для создания шаблонов, используя только собственный собственный код разработчика. Реальный вопрос должен был быть "как добавить ненадежный текст пользователя, который имеет новые строки для моего HTML-документа".

Возникает вопрос: какую стратегию мы используем для новых строк? мы используем элементы [br]? [p] s или [div] s?

Вот короткая функция, которая решает проблему:

function insertUntrustedText(domElement, untrustedText, newlineStrategy) {
    domElement.innerHTML = '';
    var lines = untrustedText.replace(/\r/g, '').split('\n');
    var linesLength = lines.length;
    if(newlineStrategy === 'br') {
        for(var i = 0; i < linesLength; i++) {
            domElement.appendChild(document.createTextNode(lines[i]));
            domElement.appendChild(document.createElement('br'));
        }
    }
    else {
        for(var i = 0; i < linesLength; i++) {
            var lineElement = document.createElement(newlineStrategy);
            lineElement.textContent = lines[i];
            domElement.appendChild(lineElement);
        }
    }
}

Вы можете в основном выбросить это где-то в свой файл common_functions.js, а затем просто запускать и забывать, когда вам нужно добавить любой файл user/api/etc → untrusted (т.е. Не написанный по-своему-разработчику) ваши html-страницы.

пример использования:

insertUntrustedText(document.querySelector('.myTextParent'), 'line1\nline2\r\nline3', 'br');

параметр newlineStrategy принимает только действительные теги dom-элементов, поэтому, если вы хотите [br] newlines, передайте 'br', если вы хотите, чтобы каждая строка в элементе [p] проходила 'p' и т.д.