将换行符插入预标记(IE,Javascript)

时间:2008-10-12 11:24:29

标签: javascript internet-explorer pre

在IE中,当我将文本插入<pre>标记时,新行会被忽略:

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

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

使用\r\n代替普通\n不起作用。

<br/>确实有效但在FF中插入了一个额外的空白行,这对我来说是不可接受的。

11 个答案:

答案 0 :(得分:12)

关于Internet Explorer的innerHTML行为的这些quirksmode.org bug report and comments可能有所帮助:

IE将 HTML规范化应用于分配给innerHTML属性的数据。这会导致在应该保留格式的元素中显示空格的错误,例如&lt; pre&gt;和&LT; TextArea&GT;

答案 1 :(得分:5)

这在IE中有效吗?

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

我用Firefox测试过它的确有效。 : - )

答案 2 :(得分:5)

可以在已接受答案中链接到的页面中找到解决方法。为了便于使用,它是:

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

答案 3 :(得分:4)

<br/>只在所有浏览器中输出一行。当然要删除\ n,代码应该是:

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

答案 4 :(得分:2)

<pre>标记内的内容不应被视为HTML。

事实上,<pre>标记的重点是显示格式化文本。

使用innerText属性是修改<pre>标记内容的正确方法。

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

答案 5 :(得分:2)

我估计这个。

我发现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]);
        }
祝你好运!

答案 6 :(得分:2)

IE9 does not normalize white spaces,与其前辈不同。

您应该测试支持,而不是针对任何特定的浏览器。 E.g ...

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 :(得分:1)

如果您不想使用outerHTML,如果其他预标记不是问题,您也可以对IE执行以下操作:

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

答案 8 :(得分:1)

这是对Edward Wilde的回答的一个非常小的调整,它保留了&lt; pre&gt;的属性。标签

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

答案 9 :(得分:0)

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

对我有用。

答案 10 :(得分:0)

我发现innerHTML在应用于元素之前已经过处理,因此&lt; br&gt;变为换行符并删除多个空格。

要保留原始文本,必须使用nodeValue,例如;

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