【JavaScript】指定した文字数を超えたスペースで改行を挿入する関数の作り方

はじめに

長い文字列を見やすいように折り返したい場合、「指定した文字数を超えた時点で、最初に現れるスペースを改行（\n）に置き換える」という処理が役立ちます。この記事では、そのような条件付きで文字列内に改行を追加する関数 breakString() の実装方法を解説します。

関数の仕様

breakString() 関数は、次の2つの引数を受け取ります。

• 第1引数： 分割対象となる文字列
• 第2引数： 改行を挿入する基準となる文字数（しきい値）

文字数がしきい値を超えている状態でスペースに到達したとき、そのスペースを改行コードに置き換えるのが基本的なルールです。

アルゴリズムの考え方

処理の手順は以下のとおりです。

1. for ループで文字列を先頭から1文字ずつ走査します。
2. 改行を挿入してから経過した文字数をカウント変数で管理します。
3. カウントがしきい値以上の状態でスペースに出会ったら、新しい文字列には改行（\n）を追加し、カウントを0にリセットします。
4. それ以外の場合は、元の文字をそのまま新しい文字列へ追加し、カウントを1つ増やします。
5. ループが完了したら、生成された文字列を返します。

実装コード

上記のロジックを実装すると、次のようになります。

const text = 'Hey can I call you by your name?';
const breakString = (str, limit) => {
    let brokenString = '';
    for(let i = 0, count = 0; i < str.length; i++){
        if(count >= limit && str[i] === ' '){
            count = 0;
            brokenString += '\n';
        }else{
            count++;
            brokenString += str[i];
        }
    }
    return brokenString;
}
console.log(breakString(text, 4));

実行結果

コンソールには次のように出力されます。

Hey can
I call
you by
your
name?

出力結果のポイント

しきい値を「4」に設定した場合、「Hey can」のように4文字以上経過した後の最初のスペースで改行されます。単語の途中で切れることなく、必ずスペースの位置でのみ改行されるため、英語のテキストを整形する際に自然な見た目を保てるのが特徴です。

この手法は、チャットアプリのメッセージ表示や、固定幅の出力フォーマットなど、単語単位でテキストを折り返したいさまざまな場面で応用できます。