JavaScriptで指定文字数ごとにタグで囲む実装方法💻

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基礎知識がある方を対象にしています。特に、文字列の操作やDOM操作に慣れている方にとって理解しやすい内容となっています。この記事を読むことで、JavaScriptを使って文字列を指定文字数ごとに分割し、HTMLタグで囲む実装方法をマスターできます。また、応用例として、自動改行機能や文字数カウンターとの連携方法も学べるため、実際のWeb開発で活かせる実践的な知識を得ることができます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 前提となる知識1: JavaScriptの基本的な文法（変数、関数、ループなど） 前提となる知識2: DOM操作の基本的な知識 前提となる知識3: HTML/CSSの基本的な知識

JavaScriptで指定文字数ごとに文字列を処理する必要性

Web開発において、長文テキストを扱う場面は多くあります。特に、日本語のように単語の区切りが明確でない言語では、指定した文字数で改行や区切りを挿入したいケースがよくあります。例えば、以下のような場面でこの技術は役立ちます。

• 記事の見出しやキャプションを一定の文字数で自動的に改行
• チャットアプリでのメッセージの自動整形
• ユーザー入力のテキストをフォーマット
• 文字数制限のある入力フィールドでの視覚的フィードバック

この技術を実装することで、ユーザー体験を向上させることができます。また、サーバーサイドで処理するよりもクライアントサイドで処理することで、ページの読み込み速度の向上にも繋がります。

具体的な実装方法と応用例

ステップ1: 基本的な文字列分割とタグ囲みの実装

まずは、最も基本的な実装方法から見ていきましょう。指定した文字数ごとに文字列を分割し、指定したHTMLタグで囲む関数を作成します。

Javascript

/**
 * 指定文字数ごとに文字列を分割し、指定したタグで囲む
 * @param {string} input - 入力文字列
 * @param {number} length - 分割する文字数
 * @param {string} tagName - 囲むタグ名
 * @returns {string} 処理後の文字列
 */
function wrapTextByLength(input, length, tagName) {
    // 入力が空文字列の場合は空文字列を返す
    if (!input) return '';

    // 指定した文字数で文字列を分割
    const chunks = [];
    for (let i = 0; i < input.length; i += length) {
        chunks.push(input.substr(i, length));
    }

    // 各チャンクを指定したタグで囲む
    const wrappedChunks = chunks.map(chunk => 
        `<${tagName}>${chunk}</${tagName}>`
    );

    // 結果を結合して返す
    return wrappedChunks.join('');
}

// 使用例
const sampleText = 'これはJavaScriptで指定文字数ごとにタグで囲むサンプルテキストです。';
const result = wrapTextByLength(sampleText, 10, 'span');
console.log(result);

この関数は、以下の処理を行っています： 1. 入力文字列が空かチェック 2. 指定した文字数で文字列を分割 3. 各分割文字列を指定したHTMLタグで囲む 4. 結果を結合して返す

ステップ2: オプションを追加した高度な実装

基本の関数を拡張して、より実用的なオプションを追加してみましょう。クラス名の指定や、改行タグの使用など、実際の開発で役立つ機能を追加します。

Javascript

/**
 * 指定文字数ごとに文字列を分割し、指定したタグで囲む（拡張版）
 * @param {string} input - 入力文字列
 * @param {number} length - 分割する文字数
 * @param {object} options - オプション
 * @param {string} options.tagName - 囲むタグ名
 * @param {string} options.className - タグに追加するクラス名
 * @param {boolean} options.useLineBreak - 改行タグを使用するか
 * @returns {string} 処理後の文字列
 */
function wrapTextByLengthAdvanced(input, length, options = {}) {
    // デフォルトオプション
    const defaultOptions = {
        tagName: 'span',
        className: '',
        useLineBreak: false
    };

    // オプションをマージ
    const finalOptions = { ...defaultOptions, ...options };

    // 入力が空文字列の場合は空文字列を返す
    if (!input) return '';

    // 指定した文字数で文字列を分割
    const chunks = [];
    for (let i = 0; i < input.length; i += length) {
        chunks.push(input.substr(i, length));
    }

    // 各チャンクを指定したタグで囲む
    const wrappedChunks = chunks.map(chunk => {
        let tag = finalOptions.tagName;

        // クラス名が指定されている場合は追加
        if (finalOptions.className) {
            tag += ` class="${finalOptions.className}"`;
        }

        // 改行タグが指定されている場合は閉じタグを変更
        const closingTag = finalOptions.useLineBreak && finalOptions.tagName === 'br' ? '' : `</${finalOptions.tagName}>`;

        return `<${tag}>${chunk}${closingTag}`;
    });

    // 結果を結合して返す
    return wrappedChunks.join(finalOptions.useLineBreak && finalOptions.tagName === 'br' ? '' : '\n');
}

// 使用例
const sampleText2 = 'これは拡張版のJavaScriptで指定文字数ごとにタグで囲むサンプルテキストです。';
const result2 = wrapTextByLengthAdvanced(sampleText2, 10, {
    tagName: 'span',
    className: 'text-chunk',
    useLineBreak: false
});
console.log(result2);

この拡張版では、以下のオプションが追加されています： - tagName: 囲むタグ名を指定（デフォルトは'span'） - className: タグに追加するクラス名を指定 - useLineBreak: 改行タグを使用するかどうかを指定

ステップ3: 実践的な応用例

実際のWebサイトでこの技術をどのように活用できるか、具体的な応用例をいくつか紹介します。

応用例1: 自動改行機能の実装

長文テキストを一定の文字数で自動的に改行する機能を実装します。これにより、デザインの崩れを防ぐことができます。

Javascript

// HTML要素に自動改行を適用する関数
function applyAutoLineBreak(elementId, maxLength) {
    const element = document.getElementById(elementId);
    if (!element) return;

    const text = element.textContent;
    const wrappedText = wrapTextByLengthAdvanced(text, maxLength, {
        tagName: 'span',
        className: 'line-break',
        useLineBreak: true
    });

    element.innerHTML = wrappedText;

    // CSSで改行スタイルを適用
    const style = document.createElement('style');
    style.textContent = `
        .line-break {
            display: inline-block;
        }
    `;
    document.head.appendChild(style);
}

// 使用例
// HTML: <div id="long-text">これは長いテキストです...</div>
// JavaScript: applyAutoLineBreak('long-text', 20);

応用例2: 文字数カウンターとの連携

入力フィールドに文字数制限を設け、残り文字数を視覚的に表示する機能を実装します。

Javascript

// 文字数カウンターと連携した関数
function setupTextCounter(inputId, counterId, maxLength) {
    const inputElement = document.getElementById(inputId);
    const counterElement = document.getElementById(counterId);

    if (!inputElement || !counterElement) return;

    // 文字数変更時のイベントリスナー
    inputElement.addEventListener('input', function() {
        const text = this.value;
        const remaining = maxLength - text.length;

        // 残り文字数を更新
        counterElement.textContent = `${remaining} 文字`;

        // 残り文字数が少なくなったら色を変更
        if (remaining < 20) {
            counterElement.style.color = 'red';
        } else {
            counterElement.style.color = '';
        }

        // 指定文字数ごとにタグで囲む
        const wrappedText = wrapTextByLengthAdvanced(text, 10, {
            tagName: 'span',
            className: 'text-chunk',
            useLineBreak: false
        });

        // プレビュー要素に表示
        const previewElement = document.getElementById(`${inputId}-preview`);
        if (previewElement) {
            previewElement.innerHTML = wrappedText;
        }
    });

    // 初期状態の更新
    inputElement.dispatchEvent(new Event('input'));
}

// 使用例
// HTML: 
// <textarea id="user-input" maxlength="100"></textarea>
// <div id="text-counter"></div>
// <div id="user-input-preview"></div>
// JavaScript: setupTextCounter('user-input', 'text-counter', 100);

ハマった点やエラー解決

この実装を進める中で、私がハマった点とその解決方法を共有します。

問題1: マルチバイト文字（日本語など）の正確な分割

最初の実装では、substrメソッドを使って文字列を分割していましたが、マルチバイト文字（日本語など）を正確に分割できず、文字化けが発生する問題がありました。

解決策

マルチバイト文字を正確に扱うために、splitメソッドと正規表現を組み合わせた方法に変更しました。

Javascript

// マルチバイト文字を正確に扱う修正版
function wrapTextByLengthCorrect(input, length, tagName) {
    // 入力が空文字列の場合は空文字列を返す
    if (!input) return '';

    // マルチバイト文字を正確に分割
    const chars = input.split('');
    const chunks = [];
    let currentChunk = '';

    for (let i = 0; i < chars.length; i++) {
        currentChunk += chars[i];

        // 指定文字数に達したら新しいチャンクを開始
        if ((i + 1) % length === 0) {
            chunks.push(currentChunk);
            currentChunk = '';
        }
    }

    // 最後のチャンクが空でない場合追加
    if (currentChunk) {
        chunks.push(currentChunk);
    }

    // 各チャンクを指定したタグで囲む
    const wrappedChunks = chunks.map(chunk => 
        `<${tagName}>${chunk}</${tagName}>`
    );

    // 結果を結合して返す
    return wrappedChunks.join('');
}

問題2: パフォーマンス問題

長いテキスト（数千文字以上）を処理する際に、ブラウザがフリーズするようなパフォーマンス問題が発生しました。

解決策

長いテキストを処理する際は、Web Workersを使って処理をメインスレッドから分離することで、UIの応答性を保つように改善しました。

Javascript

// Web Workerを使った非同期処理
function wrapTextAsync(input, length, tagName, callback) {
    // Workerの作成
    const workerCode = `
        self.onmessage = function(e) {
            const { input, length, tagName } = e.data;

            // 文字列を分割
            const chars = input.split('');
            const chunks = [];
            let currentChunk = '';

            for (let i = 0; i < chars.length; i++) {
                currentChunk += chars[i];

                if ((i + 1) % length === 0) {
                    chunks.push(currentChunk);
                    currentChunk = '';
                }
            }

            if (currentChunk) {
                chunks.push(currentChunk);
            }

            // タグで囲む
            const wrappedChunks = chunks.map(chunk => 
                \`<\${tagName}>\${chunk}</\${tagName}>\`
            );

            // 結果を返す
            self.postMessage(wrappedChunks.join(''));
        };
    `;

    const blob = new Blob([workerCode], { type: 'application/javascript' });
    const worker = new Worker(URL.createObjectURL(blob));

    worker.onmessage = function(e) {
        callback(e.data);
        worker.terminate();
    };

    worker.postMessage({ input, length, tagName });
}

// 使用例
const longText = '非常に長いテキスト...'; // 数千文字のテキスト
wrapTextAsync(longText, 50, 'span', function(result) {
    console.log('処理完了:', result);
});

まとめ

本記事では、JavaScriptで指定文字数ごとに文字列を分割し、HTMLタグで囲む実装方法 を解説しました。

• 基本的な文字列分割とタグ囲みの関数の作成方法
• オプションを追加した高度な実装方法
• 実践的な応用例（自動改行機能、文字数カウンターとの連携）
• マルチバイト文字の正確な扱い方とパフォーマンス最適化のテクニック

この記事を通して、JavaScriptを使った文字列処理の高度なテクニックを学び、実際のWeb開発で活かせる実践的な知識を得られた ことと思います。今後は、この技術をさらに発展させたライブラリの作成や、他の文字列処理テクニックについても記事にする予定です。

参考資料

参考にした記事、ドキュメントなどがあれば、必ず記載しましょう。

• MDN Web Docs - String.prototype.split()
• MDN Web Docs - Web Workers API
• You Don't Know JS: Scope & Closures
• JavaScriptで文字列を指定文字数で分割する方法