カスタマイズ可能なテキスト変換ツールの実装

はじめに

Web開発やテキスト処理において、特定のパターンに基づいてテキストを変換する必要性は頻繁に発生します。今回は、JavaScriptを使用して柔軟で使いやすいテキスト変換ツールを実装する方法を紹介します。

主な機能

1. JSONベースの置換ルール
2. 双方向変換（正変換と逆変換）
3. スペース（半角・全角）の可視化
4. クリップボードへの自動コピー

コードの解説

1. 置換ルールのパース

function parseReplacementRules(ruleText) {
  try {
    return ruleText.split('\n')
      .filter(line => line.trim() !== '')
      .map(line => JSON.parse(line));
  } catch (error) {
    console.error('置換ルールのパースに失敗しました:', error);
    return null;
  }
}

この関数は、テキストエリアに入力された置換ルールをJSONとして解析します。各行が ["from", "to"] 形式のJSON配列として解釈されます。

2. テキスト置換

function replaceText(codeText, rules) {
  return rules.reduce((text, [from, to]) => {
    const regex = new RegExp(from.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g');
    return text.replace(regex, to);
  }, codeText);
}

replaceText 関数は、パースされた置換ルールを適用してテキストを変換します。正規表現を使用してグローバルに置換を行います。

3. スペースの可視化

function visualizeAreaSpaces(textArea, id) {
  const text = textArea.value;
  const visualizedText = text
    .replace(/ /g, '<span class="half-space"> </span>')
    .replace(/　/g, '<span class="full-space">　</span>');
  
  removeSpaceVisualization(id);
  
  const div = document.createElement('div');
  div.id = id;
  div.classList.add('space-shown');
  div.innerHTML = visualizedText;
  textArea.insertAdjacentElement('afterend', div);
}

この関数は、テキストエリア内の半角スペースと全角スペースを可視化します。可視化されたテキストは、元のテキストエリアの直後に挿入されます。

活用シーン

このツールは以下のような場面で特に役立ちます：

1. コーディングスタイルの変換: 異なるコーディング規約間でのスタイル変換（例：スネークケース→キャメルケース）

2. 単位の変換: CSSにおけるpx→remの変換など

3. テキストフォーマットの調整: 特定のフォーマットに合わせたテキストの整形

4. 多言語対応: 特定の文字や単語の置換による簡易的な多言語対応

5. データクレンジング: 特定のパターンに基づいたデータの整理や正規化

まとめ

このカスタマイズ可能なテキスト変換ツールは、柔軟性と使いやすさを兼ね備えています。JSONベースの置換ルールにより、ユーザーは簡単にカスタム変換ロジックを定義できます。また、スペースの可視化機能は、見えないスペースに起因するバグの発見に役立ちます。