javascript - 带有 jquery text() 的新行

Question

我必须在我的网页上显示此代码（总共 7 行）。这<code>仅用于显示，最好的用途是复制和粘贴以供自己使用。

<script type="text/javascript">
wg_width = '250px';
wg_height = '250px';
wg_lines = '3';
wg_bgcolor = '#003366';
</script>
<script src="wg.js" type="text/javascript"></script>

我显示代码的 jquery 函数是：

function upcode(rec,w,h,color) {
var wHTML = ""; 
wHTML += ('<scr' + 'ipt type="text/javascript">\n');
wHTML += ("wg_lines = '" + rec + "';\n");
wHTML += ("wg_width = '" + w + "';\n");
wHTML += ("wg_height = '" + h + "';\n");
wHTML += ("wg_bgcolor = '" + color + "';\n");
wHTML += ('</scr' + 'ipt>\n');
wHTML += ('<scr' + 'ipt src="wg.js" type="text/javascript"></scr' + 'ipt>');
$("#box_code").text(wHTML);
}

不幸的是，我的输出仅在 1 行，这不好

<script type="text/javascript">wgppn_lines = '5'; wgppn_width ='250px'; wgppn_height = '250px';wgppn_bgcolor = '#FF0000';</script> <script src="wgppn.js" type="text/javascript"></script>

我也尝试过使用html()方法，<br>但这种方法<script>只去除标签显示

wg_width = '250px';
wg_height = '250px';
wg_lines = '3';
wg_bgcolor = '#003366';

Answer 1

您可以将文本括在<pre>标签中：

wHTML = $('<div></div>').text(wHTML).html(); // let jQuery escape it for us
$('#box_code').html('<pre>'+wHTML+'</pre>');

您可以使用以下 CSS 使框代码的行为类似于 pre：

#box_code { white-space: pre; }

您也可以更改语法以使用<script&gt代替<script>等，然后<br />手动输入标签，但这似乎有点乏味。