我有一个地方,我试图在文本区域显示代码。我已经愚弄了这个例子,但基本上用户可以输入一些字段,点击一个按钮,代码片段显示在下面的文本区域中,供他们编辑,如果他们想要,然后复制。
我终于让它工作以显示实际的代码片段。但是现在我似乎找不到一种方法来格式化它,以便它缩进并且看起来很好。
var mySnippet =
"<div id=\"myOuterDiv\">"
+ "<div id=\"myInnerDiv\">"
+ "</div>"
+ "</div>";
$('#mySnippetArea').text(mySnippet);
在我的文字区域中显示的内容如此。
<div id="myOuterDiv"><div id="myInnerDiv"></div></div>
我希望将其视为:
<div id="myOuterDiv">
<div id="myInnerDiv">
</div>
</div>
我真的想避免使用任何第三方插件,因为它的工作很难获得批准。这只是我需要格式化的4个小片段。
更新 这看起来像我需要的那样起作用。
var mySnippet =
"<div id=\"myOuterDiv\">\r"
+ " <div id=\"myInnerDiv\">\r"
+ " </div>\r"
+ "</div>\r";
输出:
<div id="myOuterDiv">
<div id="myInnerDiv">
</div>
</div>
答案 0 :(得分:2)
如果您想要一个像
这样的新行,请添加\n
var mySnippet = "<div id=\"myOuterDiv\">\n"
+ "<div id=\"myInnerDiv\">\n"
+ "</div>\n"
+ "</div>\n";
$('#mySnippetArea').text(eventSnippet);
单字符转义序列:
\b: backspace (U+0008 BACKSPACE)
\f: form feed (U+000C FORM FEED)
\n: line feed (U+000A LINE FEED)
\r: carriage return (U+000D CARRIAGE RETURN)
\t: horizontal tab (U+0009 CHARACTER TABULATION)
\v: vertical tab (U+000B LINE TABULATION)
\0: null character (U+0000 NULL)
答案 1 :(得分:0)
只需使用<pre id="mySnippetArea"></pre>
并根据所需的布局添加\ n和空格
编辑:
你也可以写
var mySnippet =
"<div id=\"myOuterDiv\">\n\
<div id=\"myInnerDiv\">\n\
</div>\n\
</div>";