BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] textareaからテキストを取得する際、改行を維持するには？

2022-06-30 18:45:38

質問

私はユーザーが送信をヒットしたときにtextareaで値を取得しています。私はその後、この値を取って、ページ上の他の場所に配置します。しかし、私がこれを行うとき、それは改行文字を失い、出力がかなり醜くなります。

以下は、私がアクセスしている textarea です。 

<textarea id="post-text" class="form-control" rows="3" placeholder="What's up?" required></textarea>

以下は、投稿にアクセスし、それを書き写すJavaScriptのコードです。 

var post = document.createElement('p');
var postText = document.getElementById('post-text').value;
post.append(postText);
var card = document.createElement('div');
card.append(post);
var cardStack = document.getElementById('#card-stack');
cardStack.prepend(card);

というような入力の場合。

グループのスケジュールです。

火曜練習＠5階（20時～23時）

木曜日練習（5階）（午後8時～午後11時

日曜練習＠（午後9時〜午前12時）

出力されるのは

グループのスケジュール 火曜日練習＠5階（20時～23時） 木曜日練習＠5階（20時～23時） 日曜日練習＠（21時～12時）

では、改行を保持する方法はあるのでしょうか？

どのように解決するのですか？

最も簡単な解決策は、テキストを挿入する要素に以下のCSSプロパティを設定することです。 

white-space: pre-wrap;

このプロパティ の中と同じように扱われます。 <textarea> . つまり、連続した空白は折りたたまれず、行は明示的な改行で分割されます（ただし、要素の幅を超えた場合は自動的に折り返されます）。

これまでにここに投稿されたいくつかの回答が脆弱であったことを考えると、このような HTML インジェクション の脆弱性があることを考えると (例えば、エスケープされていないユーザ入力を innerHTML に割り当てているため）、またはその他のバグがある場合、あなたの元のコードに基づいて、これを安全かつ正しく行う方法の例を挙げてみましょう。 

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.append(postText);
  var card = document.createElement('div');
  card.append(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.prepend(card);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

元のコードと同様に、上のスニペットは append() と prepend() . この記事を書いている時点では、これらの関数はまだ実験的なものであり、すべてのブラウザで完全にサポートされているわけではありません。 もし、安全かつ古いブラウザとの互換性を保ちたいのであれば、以下のようにかなり簡単に代用することができます。

  • element.append(otherElement) は、以下のように置き換えることができます。 element.appendChild(otherElement) ;
  • element.prepend(otherElement) は、次のように置き換えることができます。 element.insertBefore(otherElement, element.firstChild) ;
  • element.append(stringOfText) は、次のように置き換えることができます。 element.appendChild(document.createTextNode(stringOfText)) ;
  • element.prepend(stringOfText) は、次のように置き換えることができます。 element.insertBefore(document.createTextNode(stringOfText), element.firstChild) ;
  • は、特別な場合として element が空の場合、両方の element.append(stringOfText) と element.prepend(stringOfText) は、単に element.textContent = stringOfText .

以下は、上記と同じスニペットですが、このスニペットでは append() または prepend() : 

document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

Ps. 本当にやりたいのであれば を使わずに を使い、CSS white-space プロパティを使用する場合、代替案として、テキスト中の改行文字を明示的に <br> HTML タグに置き換えることです。 厄介なのは、微妙なバグや潜在的なセキュリティホールの発生を避けるために、まずHTMLのメタキャラクタをすべてエスケープしなければならないことです（最低限。 & と < ) をテキストで の前に で、この置換を行います。

おそらく最もシンプルで安全な方法は、このようにブラウザにHTMLエスケープを処理させることでしょう。 

var post = document.createElement('p');
post.textContent = postText;
post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');



document.getElementById('post-button').addEventListener('click', function () {
  var post = document.createElement('p');
  var postText = document.getElementById('post-text').value;
  post.textContent = postText;
  post.innerHTML = post.innerHTML.replace(/\n/g, '<br>\n');  // <-- THIS FIXES THE LINE BREAKS
  var card = document.createElement('div');
  card.appendChild(post);
  var cardStack = document.getElementById('card-stack');
  cardStack.insertBefore(card, cardStack.firstChild);
});

#card-stack p {
  background: #ddd;
}
textarea {
  width: 100%;
}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:

Tuesday practice @ 5th floor (8pm - 11 pm)

Thursday practice @ 5th floor (8pm - 11 pm)

Sunday practice @ (9pm - 12 am)</textarea><br>
<input type="button" id="post-button" value="Post!">
<div id="card-stack"></div>

これは改行を修正しますが、HTML レンダラによって連続した空白が折りたたまれるのを防ぐことはできないことに注意してください。 テキスト内のいくつかの空白を改行されないスペースに置き換えることで、それを (一種の) エミュレートすることは可能ですが、正直なところ、CSS の 1 行で簡単に解決できることなのに、かなり複雑になっています。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します