Вставка новой строки в предварительный тег (IE, Javascript)

В IE, когда я вставляю текст в тег <pre>, символы новой строки игнорируются:

<pre id="putItHere"></pre>

<script>
function putText() {
   document.getElementById("putItHere").innerHTML = "first line\nsecond line";
}
</script>

Использование \r\n вместо простой \n не работает.

<br/> работает, но вставляет лишнюю пустую строку в FF, что неприемлемо для моих целей.

Ответ 1

Эти отчет об ошибках quirksmode.org и комментарии о innerHTML поведение Internet Explorer могут помочь:

"IE применяет нормализацию HTML к данным, присваиваемым свойству innerHTML. Это приводит к некорректному отображению пробелов в элементах, которые должны сохранять форматирование, например, <pre> и < lt; & TextArea GT;".

Ответ 2

Обходной путь можно найти на странице, связанной с принятым ответом. Для удобства использования здесь:

if (elem.tagName == "PRE" && "outerHTML" in elem)
{
    elem.outerHTML = "<PRE>" + str + "</PRE>";
}
else
{
    elem.innerHTML = str;
}

Ответ 3

Это работает в IE?

document.getElementById("putItHere")
    .appendChild(document.createTextNode("first line\nsecond line"));

Я тестировал его с помощью Firefox, и он работает.: -)

Ответ 4

<br/> shoud выводит только одну строку во всех браузерах. Конечно, удалите \n, код должен быть:

document.getElementById("putItHere").innerHTML = "first line<br/>second line";

Ответ 5

Содержимое внутри тега <pre> не следует рассматривать как HTML.

Фактически, точка тега <pre> такова, что она отображает форматированный текст.

Использование свойства innerText - это правильный способ изменения содержимого тега <pre>.

document.getElementById("putItHere").innerText = "first line\nsecond line";

Ответ 6

IE9 не нормализует пробелы, в отличие от своих предшественников.

Вам следует протестировать поддержку, а не таргетинг на какой-либо конкретный браузер. Например...

var t = document.createElement(elem.tagName);
t.innerHTML = "\n";

if( t.innerHTML === "\n" ){
    elem.innerHTML = str;
}
else if("outerHTML" in elem)
{
    elem.outerHTML = "<"+elem.tagName+">" + str + "</"+elem.tagName+">";
}
else {
    // fallback of your choice, probably do the first one.
}

Ответ 7

Я считаю это.

Я обнаружил, что IE использует \r\n, а Fx (другие) использует \n

var newline;
if ( document.all ) newline = '\r\n';
else newline = '\n';

var data = 'firstline' + newline + 'second line';
document.getElementById("putItHere").appendChild(document.createTextNode(data));

Для модуля TinyMCE (wysiwyg editor), который я однажды сделал, я закончил с использованием режима редактирования BR i и очистили его от отправки и т.д.

Этот код проходит через все элементы BR внутри элементов PRE и заменяет BR символами новой строки.

Обратите внимание, что код основан на TinyMCE API, но может быть легко написан с использованием стандартного Javascript.

Очистка:

        var br = ed.dom.select('pre br');
        for (var i = 0; i < br.length; i++) {
          var nlChar;
          if (tinymce.isIE)
            nlChar = '\r\n';
          else
            nlChar = '\n';

          var nl = ed.getDoc().createTextNode(nlChar);
          ed.dom.insertAfter(nl, br[i]);
          ed.dom.remove(br[i]);
        }

Удачи!

Ответ 8

Я обнаружил, что innerHTML обрабатывается до его применения к элементу, следовательно <br> становится новой строкой и удаляются несколько белых пробелов.

Чтобы сохранить исходный текст, вы должны использовать nodeValue, например:

document.getElementById('pre_id').firstChild.nodeValue='    white space \r\n ad new line';

Ответ 9

Если вы не хотите использовать outerHTML, вы также можете сделать следующее для IE, если дополнительный предварительный тег не является проблемой:

 if(isIE)
     document.getElementById("putItHere").innerHTML = "<pre>" + content+"</pre>";
 else
     document.getElementById("putItHere").innerHTML = content;

Ответ 10

Вот очень маленькая настройка для ответа Эдварда Уайльда, которая сохраняет атрибуты на <pre> тег.

if (elem.tagName == "PRE" && "outerHTML" in elem) {
    var outer = elem.outerHTML;
    elem.outerHTML = outer.substring(0, outer.indexOf('>') + 1) + str + "</PRE>";
}
else {
    elem.innerHTML = str;
}

Ответ 11

if (typeof div2.innerText == 'undefined')
    div2.innerHTML = value;
else
    div2.innerText = value;

который работал у меня.