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

JavaScriptで特定の文字を区切りに文字列を分割し、改行を挿入する方法

JavaScriptで特定の文字を区切りに文字列を分割する方法

JavaScriptで文字列を特定の文字（この例では「~」）の出現箇所ごとに分割するには、split()メソッドを使用します。分割後、各「~」の位置に改行タグ（<br>）を挿入することで、読みやすい形式に整形できます。

例えば、次のような文字列があるとします。

This is demo text 1!~This is demo text 2!~~This is demo text 3!

これを「~」の出現箇所で分割し、それぞれに改行を挿入すると、以下のように表示されます。

This is demo text 1!
This is demo text 2!
This is demo text 3!

実装の手順

処理は以下の2ステップで構成されます。

  1. split()で分割： 対象の文字列を「~」を区切り文字として配列に分割します。
  2. join()で結合： 分割された配列の要素を<br>タグを挟んで再び1つの文字列に連結します。

コード例

以下は、ブラウザでそのまま動作確認できる完全なサンプルコードです。

<!DOCTYPE html>
<html>
   <body>
   <h2>改行の挿入</h2>
   <script>
      var myArray = 'This is demo text 1!~This is demo text 2!~
                       ~This is demo text 3!~This is demo text 4!~
                       ~This is demo text 5!';
      document.write("元の文字列： " + myArray);

      var brk = myArray.split('~');
      var res = brk.join(" <br> ");

      document.write("<br><br>" + res);
   </script>
   <p>「~」が出現するたびに、上記のように改行が挿入されます。</p>
  </body>
</html>

ポイントの解説

  • myArray.split('~')：文字列を「~」で区切り、配列として返します。
  • brk.join(" <br> ")：配列の各要素を<br>タグで連結し、HTML上で改行表示される文字列を生成します。

このように、split()とjoin()を組み合わせることで、任意の区切り文字をもとに文字列を整形し、Webページ上で見やすい複数行テキストとして簡単に出力できます。

  1. JavaScriptの正規表現を使って文字列の特定部分を削除する方法

    JavaScriptでは、正規表現（RegExp）と replace() メソッドを組み合わせることで、文字列の中から指定した2つの区切り文字に挟まれた部分を簡単に削除できます。基本的な考え方たとえば、括弧「( )」で囲まれたテキストを削除したい場合は、次のような正規表現パターンを使用します。/ *\([^)]*\) */g — 括弧とその中身、および前後の空白にマッチします。\( と \) — 開き括弧と閉じ括弧そのものにマッチします。[^)]* — 閉じ括弧以外の任意の文字列にマッチします。末尾の g フラグ — 文字列内のすべての該当箇所を置換対象にします。サンプルコード以下は、文字列か

  2. JavaScriptで文字列からテキストを削除する方法｜substrとreplaceの使い方を解説

    JavaScriptで文字列からテキストを削除するには、主にsubstrメソッドとreplaceメソッドの2つの方法があります。それぞれの使い方を、構文・コード例・実行結果とあわせてわかりやすく解説します。 方法1：substrメソッドで部分文字列を抽出する JavaScriptのStringクラスには、指定した文字列から部分文字列を抽出するためのsubstrメソッドが用意されています。開始位置と文字数を指定することで、文字列の先頭・末尾、あるいはその両方から不要なテキストを取り除くことができます。 構文 str.substr(start[, length]) startは抽出の開始位置（0始