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

JavaScriptで配列の値に改行を挿入する方法【split・join活用】

JavaScriptで配列や文字列の値に含まれる特定の区切り文字「~」が出現するたびに改行を追加したい場合は、まず split() メソッドで文字列を分割します。その後、join() メソッドを使って、各区切り位置に改行タグ <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!

実装例

以下は、ブラウザでそのまま動作するライブデモのコードです。

<!DOCTYPE html>
<html>
    <body>
        <h2>Adding line break</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("Original Array: "+myArray);
            var brk = myArray.split('~');
            var res = brk.join(" <br> ");
            document.write("<br><br>"+res);
        </script>
        <p>Each occurence of ~ adds a line break above.</p>
    </body>
</html>

このコードでは、split('~') によって元の文字列が「~」を基準に配列へ分割され、続く join(" <br> ") によって各要素が改行タグを挟んだ形で連結されます。その結果、「~」が出現するたびに画面上で改行されて表示されます。

代替手段：replace() を使った一括置換

split() と join() を組み合わせる代わりに、正規表現と replace() メソッドを使えば、よりシンプルに記述することもできます。

var res = myArray.replace(/~/g, "<br>");
document.write(res);

この方法では、文字列中のすべての「~」を一括して <br> に置き換えられます。なお、HTMLとして表示するのではなく、コンソール出力やテキスト処理などで改行したい場合は、<br> の代わりに改行文字 \n を使用してください。

まとめ

  • split() で区切り文字を基準に配列へ分割する
  • join("<br>") で改行タグを挟んで再結合する
  • または replace(/~/g, "<br>") で一括置換する

いずれの方法でも、区切り文字の出現箇所に応じて柔軟に改行を挿入できます。用途に応じて使い分けると良いでしょう。

  1. 複数の値でJavaScript配列の要素を検索する方法

    JavaScriptである配列（arr）が、別の配列（arr1）の複数の値・すべての要素を含んでいるかどうかを確認したい場面はよくあります。そんなときは、every()メソッドとincludes()メソッドを組み合わせることで、シンプルに判定できます。以下はそのサンプルコードです。 コード例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=

  2. 【Excel】区切り位置機能で改行を区切り記号として使う方法を解説

    Excelでは、1つのセルの中に名前や住所など複数行のテキストを入力することがあります。このようなセル内の改行は、実は「区切り位置」機能の区切り記号として活用できます。区切り記号に改行を指定すれば、1つのセルに入力された複数行のデータを、それぞれ別の列へ自動的に分割できるのです。 本記事では、Excelの区切り位置機能で改行を区切り記号として使う方法を、具体的な手順とともにわかりやすく解説します。 改行を区切り記号として使う2つの方法 区切り位置機能で改行を区切り記号として使用するには、主に以下の2つの方法があります。 方法1: データタブの「区切り位置」ウィザードを使用する 方法2: VB