javascript - pre タグに改行を挿入する (IE、Javascript)

Question

IE でタグにテキストを挿入する<pre>と、改行は無視されます。

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

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

\r\nプレーンの代わりに使用\nしても機能しません。

<br/>動作しますが、FF に余分な空白行が挿入されます。これは私の目的には受け入れられません。

score 12 · Accepted Answer

これらのquirksmode.org のバグレポートと、Internet Explorer の innerHTML の動作に関するコメントが役立ちます。

" IE は、innerHTML プロパティに割り当てられたデータにHTML 正規化を適用します。これにより、<pre> や <textarea> などの書式設定を保持する必要がある要素で空白が正しく表示されません。 "

score 6 · Accepted Answer

これは IE で動作しますか?

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

Firefoxでテストしましたが、動作します。:-)

score 5 · Accepted Answer

回避策は、受け入れられた回答にリンクされているページにあります。使いやすいように、次のようにします。

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

score 4 · Accepted Answer

<br/>すべてのブラウザーで 1 行だけを出力する必要があります。もちろん \n も削除します。コードは次のようになります。

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

score 4 · Accepted Answer

タグ内のコンテンツ<pre>は HTML と見なされるべきではありません。

実際、<pre>タグのポイントは、書式設定されたテキストを表示することです。

<pre>タグのコンテンツを変更するには、innerText プロパティを使用するのが正しい方法です。

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

outerHTML を使用したくない場合、追加の pre タグが問題にならない場合は、IE に対して次のことを行うこともできます。

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

score 1 · Accepted Answer

<pre> タグの属性を保持する Edward Wilde の回答に対する非常に小さな調整があります。

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

score 1 · Accepted Answer

これだと思います。

私が見つけたのは、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編集モードを使用することになり、送信時にクリーンアップしました。

このコードは、PRE 要素内のすべての BR 要素をループし、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]);
        }

幸運を！

score 1 · Accepted Answer

innerHTML は要素に適用される前に処理されるため、 <br> が改行になり、複数の空白が削除されることがわかりました。

生のテキストを保持するには、たとえば nodeValue を使用する必要があります。

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

score 0 · Accepted Answer

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

それは私のために働いた。

javascript - pre タグに改行を挿入する (IE、Javascript)

11 に答える 11

Related

Reference