3

我正在尝试从 a 中获取值textarea并将其放入 apre tag中，它在 chrome 和 mozilla 上运行良好，但在 IE8 上，整个内容都保留在pre tag

jsbin链接：http: //jsbin.com/uwunug/4/edit

这就是全部：

<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

</head>
<body>
<script type='text/javascript'>
$(function(){

$('#b1').click(function(){
x = $('textarea').val();
$('#tt').html(htmlEscape(x));    
});

});
function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')            
            .replace(/>/g, '&gt;');
}
</script>


 <textarea cols='50' rows='20'>
 </textarea>
 <button id='b1'>make code</button>
 <pre class="prettyprint" id='tt'>
</pre>

</body>
</html>

我注意到（通过替换\n为“输入”）\n字符进入 pre 但它们不会在那里产生新行

4

6 回答 6

4

atm 我的解决方案是在最后添加这一行：

.replace(/\n/g, '<br\>')

在我的 htmlEscape 中，是这样的：

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')         
            .replace(/</g, '&lt;')                      
            .replace(/>/g, '&gt;')
        .replace(/\n/g, '<br\>');
}

如果您知道更好的答案，请发布您的答案

于 2011-09-16T14:12:42.363 回答
2

“IE 将 HTML 规范化应用于分配给 innerHTML 属性的数据。这会导致应该保留格式的元素中的空白显示不正确，例如<pre>and <textarea>。”

在前置标签中插入换行符（IE、Javascript）

该\n解决方案可能是您最好的选择（唯一的其他选择似乎是使用 innerText，但我更喜欢您的解决方案）。

于 2011-09-16T14:18:15.233 回答
1

如果问题是 IE 使用 innerHTML，那么不要使用 innerHTML：

document.getElementById("tt").appendChild(document.createTextNode(x));

代替

$('#tt').html(htmlEscape(x));
于 2011-09-16T15:45:46.933 回答
1

采用

document.getElementById("ID").textContent = 'YOUR TEXT';
于 2012-09-14T08:45:38.537 回答
0

该<pre>元素的默认行为是显示所有空格，包括换行符，因此默认情况下，您应该会看到有\n字符的新行。

如果您没有看到，则表示该元素的默认行为已被您的样式表覆盖。

这是使用 CSSwhite-space属性完成的。默认情况下，<pre>标签将此属性设置为white-space:pre;。像这样设置white-space属性将导致<pre>元素 - 或者实际上任何其他元素 - 根据元素的默认值显示所有空白，包括换行符<pre>。

该属性有许多可能的设置white-space。您可以在此处找到所有示例以及它们如何影响布局：http ://www.impressivewebs.com/css-white-space/

因此，如果您希望<pre>正常运行，您应该删除当前设置white-space属性的样式，或者覆盖它们并将其设置回默认值。

希望有帮助。

ps - 如果您打算尝试white-space我上面链接的页面上列出的各种值，请注意旧版本的 IE（IE7 和更早版本）可能不支持此属性的所有可能选项。如果您对此感到担心，那么QuirksMode.org 有一个兼容性表可以帮助您。

于 2011-09-16T14:27:12.283 回答
0

采用

                 replace('\r','&lt;br/&gt;')                               .
于 2013-02-20T19:16:37.060 回答