10

私はまだJadeテンプレートエンジンにあまり詳しくありません。\ nなどの新しい行をbrタグに変換すると同時に、他のコンテンツをエンコードしたままにする方法はありますか？

例えば

.replace(/\n/g,'</br>')

エンコードされた値に適用すると、機能するはずです。ただし、値をエンコードして結果を取得する方法がわかりません。これを助ける人はいますか？

4

6 に答える 6

15

次のように、jadesエスケープメソッドを使用して、その戻り値の改行を置き換えることができます。

p !{escape(foo).replace(/\n/g, '<br/>')}

私はあなたのユースケースに組み込まれている機能を知りません。

パグがエスケープ関数を取り除いたように見えるので、これはあなたが今使用しなければならないものです：

p !{foo.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/\n/g, '<br/>')}
于 2013-01-26T19:49:20.417 に答える
12

正確に必要ない場合は<br>、テキストを<pre>タグ内に配置するだけです。すべての空白（新しい行を含む）は、入力されたとおりに表示されます。

white-space: preまたは、空白の事前フォーマットを保持するようにcssルールを設定することもできます。これについてMDNを確認してください。

于 2014-07-25T12:39:36.410 に答える
9

エスケープメソッド。単純なスペース（''）文字を "％20"に変換します。

MDNによると、escapeは非推奨であり、HTMLコンテンツではなく、URLで文字列をエンコードするためのものです。別の解決策、

each line in foo.split(/\n/)
  = line
  br
于 2014-06-29T17:09:11.007 に答える
1

ほとんどの答えはあなたがする必要があると言いますp !{foo.replace(/\n/g)}。ただし、それだけでは不十分です\n。inregexは改行文字と一致するため、\inをエスケープする必要があります\n。これを行うには、にを追加\し\nます。

最終結果：

p !{foo.replace(/\\n/g, '<br />')}

注：他の文字もエスケープしたい場合は、次を追加するだけです。
.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')

編集： htmlタグ内のすべての文字を正しくエスケープするために
使用できます。これは、ユーザーが入力フィールドにタグをp #{foo.replace...}挿入してWebサイトをハッキングするのを防ぎたい場合に役立ちます。<script>...</script>

于 2018-08-30T18:50:27.163 に答える
0

本当に<br>タグが必要かどうかを検討してください。

代わりにCSSを使用できる場合

を使用することをお勧めしますwhite-space: pre-line。MDNページを参照してください。

pre-line

空白のシーケンスは折りたたまれています。改行文字、、、<br>および必要に応じて行ボックスを埋めるために行が分割されます。

これは、改行文字が改行に変わることを除いて、通常の動作と同じです。

これはあなたが望むことをするはずです。

<br>タグが必要な場合

タグを与える既存の回答はすべて、<br>HTMLの出力をエスケープしないか（危険な場合があります）、エスケープロジックを再実装するか、末尾に改行を残します。

これはPalaniの回答に基づいていますが、末尾に改行を残さず、foonullまたはfalseになるのを防ぎます。

each line in (foo || '').split('\n').slice(0, -1)
  = line
  br
= (foo || '').split('\n').pop()

私はこのソリューションが好きではありませんが、<br>タグが必要な場合は、他のソリューションよりも望ましいと思います。

split大きな文字列を挿入する場合は、結果の一時変数を作成して、 2回実行されないようにすることをお勧めします。

于 2021-11-21T09:45:14.710 に答える
-1

あなたはそれを簡単に行うことができます：

p !{someString.replace(/\n/g, '<br/>')}

このメソッドは文字列を正しくエスケープすることに注意してください。

于 2014-02-13T14:38:58.277 に答える