🦔
カスタマイズ可能なテキスト変換ツールの実装
はじめに
Web開発やテキスト処理において、特定のパターンに基づいてテキストを変換する必要性は頻繁に発生します。今回は、JavaScriptを使用して柔軟で使いやすいテキスト変換ツールを実装する方法を紹介します。
主な機能
- JSONベースの置換ルール
- 双方向変換(正変換と逆変換)
- スペース(半角・全角)の可視化
- クリップボードへの自動コピー
コードの解説
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);
}
この関数は、テキストエリア内の半角スペースと全角スペースを可視化します。可視化されたテキストは、元のテキストエリアの直後に挿入されます。
活用シーン
このツールは以下のような場面で特に役立ちます:
-
コーディングスタイルの変換: 異なるコーディング規約間でのスタイル変換(例:スネークケース→キャメルケース)
-
単位の変換: CSSにおけるpx→remの変換など
-
テキストフォーマットの調整: 特定のフォーマットに合わせたテキストの整形
-
多言語対応: 特定の文字や単語の置換による簡易的な多言語対応
-
データクレンジング: 特定のパターンに基づいたデータの整理や正規化
まとめ
このカスタマイズ可能なテキスト変換ツールは、柔軟性と使いやすさを兼ね備えています。JSONベースの置換ルールにより、ユーザーは簡単にカスタム変換ロジックを定義できます。また、スペースの可視化機能は、見えないスペースに起因するバグの発見に役立ちます。
Discussion