用jQuery显示格式化的原始HTML [英] Display formatted raw html with jquery

问题描述

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

我终于使它能够显示实际的代码片段.但是现在我似乎找不到找到格式化它的方法，以使其缩进并看起来不错.

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>

解决方案

如果要换行，请添加\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/

I have a place where I am trying to show code in a text area. I have dumbed down the example but basically user can input some fields, click a button, and the code snippet displays in a text area below for them to edit if they want and then copy.

I finally got it working to display the actual code snippet. But now I can't seem to find a way to format it so that it is indented and looks nice.

var mySnippet =
"<div id=\"myOuterDiv\">"
    + "<div id=\"myInnerDiv\">"
    + "</div>"
    + "</div>";
$('#mySnippetArea').text(mySnippet);

Which displays in my text area like so.

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

Where as I would like to see it as:

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

I'd really like to avoid any 3rd party plugins as its for work an a pain to get approval. It's just 4 small snippets I need to format.

UPDATE This appears to work as I need.

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

Output:

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

解决方案

Add a \n if you want a new line like

var mySnippet = "<div id=\"myOuterDiv\">\n"
    + "<div id=\"myInnerDiv\">\n"
    + "</div>\n"
    + "</div>\n";
$('#mySnippetArea').text(eventSnippet);

Single character escape sequences:

\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)

Example: http://jsfiddle.net/jtx7e/

这篇关于用jQuery显示格式化的原始HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！