使用 jquery 显示格式化的原始 html答案

【问题标题】：Display formatted raw html with jquery使用 jquery 显示格式化的原始 html
【发布时间】：2012-10-10 15:02:59
【问题描述】：

我有一个地方试图在文本区域中显示代码。我已经简化了示例，但基本上用户可以输入一些字段，单击一个按钮，代码 sn-p 显示在下面的文本区域中，供他们根据需要进行编辑然后复制。

我终于让它可以显示实际的代码 sn-p。但是现在我似乎找不到一种方法来格式化它，使它缩进并且看起来不错。

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>

我真的很想避免使用任何 3rd 方插件，因为它的工作很难获得批准。我只需要格式化 4 个小 sn-ps。

更新这似乎可以满足我的需要。

var mySnippet =
        "<div id=\"myOuterDiv\">\r"
            + "    <div id=\"myInnerDiv\">\r"
            + "    </div>\r"
            + "</div>\r";

输出：

<div id="myOuterDiv">
    <div id="myInnerDiv">
    </div>
</div>

【问题讨论】：

使用 \t: 水平制表符代替多个退格来缩进

标签： javascript jquery html

【解决方案1】：

如果您想要一个新行，请添加\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)

示例： http://jsfiddle.net/jtx7e/

【讨论】：

您还必须为缩进填充自己的空格。
在注明的地方添加 \n 不会导致换行？它只是导致现在 div 之间有一个空格（例如

而不是

）
@Adam 你在使用
```
 标签吗？
```

@CrisimIlNumenoreano 不，我没有使用

 标签。我发现如果您使用 \r 而不是 \n，则此答案有效。

我不确定为什么 \n 在我的应用程序中对我不起作用。