🦔

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

2024/10/07に公開

はじめに

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

https://code-plus.jp/gp/replace-text-multirules/

主な機能

  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ベースの置換ルールにより、ユーザーは簡単にカスタム変換ロジックを定義できます。また、スペースの可視化機能は、見えないスペースに起因するバグの発見に役立ちます。

Discussion