JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでテキストのタブ・改行・空白を処理する方法

テキスト内のタブ、改行、空白（ホワイトスペース）を制御したい場合は、JavaScriptのwhiteSpaceプロパティを使用します。このプロパティには「normal」「nowrap」「pre」などの値を設定でき、CSSのwhite-spaceプロパティと同じ役割を果たします。

whiteSpaceプロパティの主な値

  • normal：連続する空白を1つにまとめ、必要に応じて自動的に折り返します（初期値）。
  • nowrap：空白はまとめられますが、改行されずに1行で表示されます。
  • pre：HTMLの<pre>タグと同じ動作になり、空白や改行がそのまま保持されます。テキストは改行位置でのみ折り返されます。
  • pre-wrap：空白と改行を保持しながら、必要に応じて自動的に折り返します。
  • pre-line：改行は保持されますが、連続する空白はまとめられ、必要に応じて折り返します。

実装例

以下のコードでは、ボタンをクリックするとdisplay()関数が呼び出され、ボックス要素のwhiteSpaceプロパティに「pre」が設定されます。その結果、元のテキストの改行と空白がそのまま表示されるようになります。

<!DOCTYPE html>
<html>
   <head>
      <style>
         #box {
            width: 300px;
            height: 100px;
            border: 2px solid black;
            background-color: gray;
         }
      </style>
   </head>
   <body>
      <button onclick="display()">Set</button>
      <div id="box">
         This is Demo Text.
         This is Demo Text.
         This is Demo Text.
         This is Demo Text.
         This is Demo Text.
      </div>
      <script>
         function display() {
            document.getElementById("box").style.whiteSpace = "pre";
         }
      </script>
   </body>
</html>

ポイント解説

サンプルコードの重要な部分は次の1行です。

document.getElementById("box").style.whiteSpace = "pre";

ここではgetElementById()メソッドでIDが「box」の要素を取得し、そのスタイルのwhiteSpaceプロパティに「pre」を代入しています。「pre」を設定することで、<pre>タグを使用した場合と同様に、テキスト内の空白や改行がそのまま反映され、折り返しは改行位置でのみ行われます。

このようにJavaScriptから動的にwhiteSpaceプロパティを変更すれば、ユーザーの操作に応じてテキストの表示形式を柔軟に切り替えることができます。

  1. CSSとJavaScriptでタブUIを実装する方法【初心者向け解説】

    CSSとJavaScriptを組み合わせれば、Webページにタブ切り替え機能を簡単に実装できます。タブを使うことで、限られたスペースに複数の情報を整理して表示でき、ユーザーにとって見やすいインターフェースを実現できます。 ここでは、試験情報を例に、クリックすると表示内容が切り替わるタブの作成方法を紹介します。 実装例 以下が完全なサンプルコードです。そのままHTMLファイルとして保存すれば動作します。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="

  2. JavaScriptでテキストを切り替える（トグルする）方法を解説

    JavaScriptを使えば、ボタンをクリックするたびに表示されるテキストを切り替える（トグルする）処理を簡単に実装できます。ここでは、innerHTMLプロパティと条件分岐を組み合わせた、最も基本的なテキスト切り替えの方法をサンプルコード付きで解説します。実装コード例<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style>