1

テキスト領域にコードを表示しようとしている場所があります。例をおろそかにしましたが、基本的にユーザーはいくつかのフィールドを入力してボタンをクリックすると、コードスニペットが下のテキスト領域に表示され、必要に応じて編集してコピーできます。

私はついに実際のコードスニペットを表示するように動作するようになりました。しかし、今では、インデントされて見栄えがするようにフォーマットする方法を見つけることができないようです。

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>
4

2 に答える 2

2

\n次のような新しい行が必要な場合は、を追加します

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

1 文字のエスケープ シーケンス:

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

于 2012-10-10T15:05:54.960 に答える
0

<pre id="mySnippetArea"></pre>必要なレイアウトに従って \n とスペースを使用して追加するだけです

編集：

あなたも書くことができます

var mySnippet =
"<div id=\"myOuterDiv\">\n\
   <div id=\"myInnerDiv\">\n\
   </div>\n\
</div>";
于 2012-10-10T15:06:39.033 に答える