textareaで改行や空白を処理する
2022-01-14 03:44:39
textareaを使ってフォアグラウンドでテキストを編集し、jsでバックエンドに送信する場合、スペースと改行が最も考慮しなければならない問題です。textareaでは、スペースと改行は次のように保存されます。
/s
と
/n
私たちが入力して前面に表示するテキストがテキストエリアであれば、何もしなくても、テキストエリアに書いたスタイルが、前に編集したスタイルに従って、正しく表示されるのです。
textareaエディタで送信されたテキストをバックエンドから返し、textareaに表示しない必要がある場合、スペースと改行の処理を考慮する必要があります。
実は、このプロジェクトを進めているときは、こうした問題について全く考えていなかったのですが、最近、ユーザーがテキストエリアにテキストを入力して送信すると、記事形式でページに表示されるという要件が発生しました。ユーザーが入力したスペースがいくつであろうと、デフォルトでは各段落は2文字ずつしかインデントされず、ユーザーがアップロードした詩の形式も考慮しなければならないので、各段落の間に空白行が2行入ることがあります。一言で言えば、「ユーザーが入力したスペースを削除し、段落間の改行を維持する」ということです。
そこで、結局、何も加工せずに直接バックエンドに保存することにしました。表示するときは、バックエンドからテキストを取得し、テキスト内のすべてのスペースを削除し、それを
<pre>
関連
-
キャンバスは、マウスがまぶしい小さなボールの実装に従ってください。
-
HTML5入門(II)
-
キャンバステキストフィルリニアグラデーション使用詳細説明
-
rtmpストリーミングライブのHTML5再生
-
localStorageの最大記憶容量を取得する方法を説明する
-
iframeとwindow.onloadの詳しい使い方
-
HTML5 Blobによるファイルダウンロード機能のサンプルコード
-
postMessageを用いたiframeのクロスドメイン実装について
-
印刷用のクリア画像を生成するhtml2canvasのサンプルコード
-
HTML5 における scroll-to-bottom イベントの問題を解決する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
HTML5セマンティックタグ(モバイル必須)
-
HTML5の再適応スキームとビューポート適応の問題点を解説
-
HTMLとCSSを使ったタグクラウド効果(デモあり)
-
Canvasでグラフィックス/イメージバインディングのイベントリスナーを実装する方法
-
HTML5開発によるダイナミックオーディオマップの実装
-
HTML5 の数値入力コードで整数値のみを受け付けるようにする
-
iframeタグが入れ子になっている問題の解決法
-
webViewでhtml画像を読み込む際の問題を解決する。
-
ivxプラットフォーム開発:9箱の抽選機能をコードレスで実装する。
-
html文字列の正規判定とマッチングの具体的な利用方法について