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

Question

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

<code><pre id="putItHere">

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

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

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

Answer 1

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

" IE применяет нормализацию HTML к данным, назначенным свойству innerHTML. Это приводит к некорректному отображению пробелов в элементах, которые должны сохранять форматирование, таких как и ."

Answer 2

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

if (elem.tagName == "PRE" && "outerHTML" in elem)
{
    elem.outerHTML = "" + str + "

"; } еще { elem.innerHTML = str; }

Answer 3

Работает ли это в IE?

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

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

Answer 4

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

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

Answer 5

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.
}

Answer 6

Я считаю это.

Я обнаружил, что 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), который я однажды сделал, я использовал режим редактирования BR i и убрал его при отправке и т. д.

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

Обратите внимание, что код основан на API TinyMCE, но может быть легко написан с использованием стандартного 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]);
        }

Удачи!

Answer 7

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

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

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

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

Answer 8

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

tag.

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

"; } еще { elem.innerHTML = str; }

Answer 9

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

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

"; еще document.getElementById ("putItHere"). innerHTML = content;

Answer 10

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

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

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