はじめに

ChatGPTなどの生成AIを活用すると、出力テキストをさまざまな形式に合わせて整形する作業が頻繁に発生します。

例えば、以下のような置換が必要になる場合があります。

強調記号を無くす：** → "" (空白)
Qiitaで数式記号を使う：\( → $, \) → $

しかし、既存のテキスト置換ツールでは毎回置換ルールを手動で設定する必要があり、手間がかかっていました。
コードで置換ルールを書くこともできますが、プログラミングの知識が必要だったり、都度スクリプトを実行するのは面倒なことが多いです。

そこで、本記事では、シンプルで簡単にテキストを一括置換できるWebツールを紹介し、その使い方と実際に動作するHTML/JavaScriptのコードをMarkdown AIで公開します。

テキスト変換ツールを試す

使い方

テキストを入力
「入力テキスト」に置換前の文章を入力します。
置換ルールを追加
「+」ボタンを押して、置換前後のテキストを設定します。
置換を実行
「置換実行」ボタンを押すと、置換が適用されたテキストが出力されます。
コピー
「コピー」ボタンを押すと、出力結果をクリップボードにコピーできます。

実装コード

ツールの実装コードを見る

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <title>テキスト置換ツール</title>
  <!-- Font Awesome CDN -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
    integrity="sha512-Fo3rlrZj/k7ujTnHg4C+XcXuk8qVJkR3M+8u1XxClK5WQZFlEVkYlFHmraYzH7YgFZ4M1PAXwLkz5G1S/a5Zug=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <style>
    body {
      font-family: sans-serif;
      margin: 10px;
      background: #f5f5f5;
    }
    .container {
      max-width: 600px;
      margin: auto;
      background: #fff;
      padding: 15px;
      border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    }
    h1, h2 {
      margin: 5px 0;
      font-size: 18px;
    }
    label {
      font-weight: bold;
      font-size: 14px;
    }
    textarea {
      width: 100%;
      padding: 6px;
      margin: 5px 0 10px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 3px;
      resize: vertical;
    }
    .replacement-row {
      display: flex;
      align-items: center;
      margin-bottom: 5px;
    }
    .replacement-row input {
      flex: 1;
      min-width: 0;
      padding: 5px;
      font-size: 13px;
      border: 1px solid #ccc;
      border-radius: 3px;
      margin-right: 5px;
    }
    .remove-btn {
      padding: 3px 6px;
      font-size: 14px;
      background: #ff4d4d;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      margin-right: 5px;
    }
    button {
      padding: 6px 10px;
      font-size: 14px;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      margin-right: 5px;
    }
    /* 「＋」ボタンのスタイル */
    #addReplacementBtn {
      background: #28a745;
      color: #fff;
      margin-left: 10px;
    }
    #replaceBtn { 
      background: #007BFF; 
      color: #fff; 
    }
    
    /* コピー用ボタンのスタイル */
    .copy-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: #17a2b8;
      color: #fff;
      border: none;
      border-radius: 3px;
      cursor: pointer;
      font-size: 14px;
      padding: 6px 10px;
      transition: background-color 0.3s ease;
      margin-left: 10px;
    }
    /* 通常表示とコピー後表示の切り替え */
    .default-text, .default-icon { display: inline-block; }
    .copied-text, .copied-icon { display: none; }
    .copy-button.copied .default-text, 
    .copy-button.copied .default-icon { display: none; }
    .copy-button.copied .copied-text,
    .copy-button.copied .copied-icon { display: inline-block; }
    
    .icon {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-right: 4px;
    }
    
    hr {
      border: none;
      border-top: 1px solid #ddd;
      margin: 10px 0;
    }
    /* 置換ルールの見出しと追加ボタンを横並びに */
    .rules-header {
      display: inline-flex;
      align-items: center;
      margin-bottom: 5px;
    }
    
    /* 出力ヘッダー：ラベルとコピー用ボタンを横並びに */
    .output-header {
      display: inline-flex;
      align-items: center;
      margin-bottom: 5px;
    }
    
    /* 全てのボタンにホバー時の暗くなるエフェクト */
    button:hover {
      filter: brightness(90%);
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>テキスト置換ツール</h1>
    <div>
      <label for="inputText">入力テキスト</label>
      <textarea id="inputText" rows="6" placeholder="置換前の文章を入力"></textarea>
    </div>
    <hr>
    <div id="replacementContainer">
      <div class="rules-header">
        <h2>置換ルール</h2>
        <button id="addReplacementBtn">＋</button>
      </div>
      <div class="replacement-row">
        <button class="remove-btn">-</button>
        <input type="text" class="replace-from" placeholder="置換前">
        <input type="text" class="replace-to" placeholder="置換後">
      </div>
    </div>
    <div style="margin-bottom:10px;">
      <button id="replaceBtn">置換実行</button>
    </div>
    <hr>
    <div>
      <div class="output-header">
        <label for="outputText">出力テキスト</label>
        <button id="copyBtn" class="copy-button">
          <span class="default-text">コピー</span>
          <i class="fas fa-copy default-icon"></i>
          <span class="copied-text">コピー</span>
          <i class="fas fa-check copied-icon"></i>
        </button>
      </div>
      <textarea id="outputText" rows="6" placeholder="置換後の文章" readonly></textarea>
    </div>
  </div>
  
  <script>
    /**
     * テキストコピー関数
     */
    function copyToClipboard(button, text) {
      navigator.clipboard.writeText(text)
        .then(() => {
          button.classList.add("copied");
          // 2秒後に元に戻す
          setTimeout(() => {
            button.classList.remove("copied");
          }, 2000);
        })
        .catch(err => {
          console.error("コピーに失敗しました:", err);
        });
    }
    
    // 初期の削除ボタンに確認ダイアログを追加
    document.querySelectorAll('.remove-btn').forEach(btn => {
      btn.addEventListener('click', e => {
        if (confirm('このルールを削除してよろしいですか？')) {
          const row = e.target.closest('.replacement-row');
          row.parentNode.removeChild(row);
        }
      });
    });
    
    // ルール追加時の処理
    function addReplacementRow() {
      const container = document.getElementById('replacementContainer');
      const newRow = document.createElement('div');
      newRow.className = 'replacement-row';
      
      const removeBtn = document.createElement('button');
      removeBtn.textContent = '-';
      removeBtn.className = 'remove-btn';
      removeBtn.addEventListener('click', () => {
        if (confirm('このルールを削除してよろしいですか？')) {
          container.removeChild(newRow);
        }
      });
      
      const inputFrom = document.createElement('input');
      inputFrom.type = 'text';
      inputFrom.className = 'replace-from';
      inputFrom.placeholder = '置換前';
      
      const inputTo = document.createElement('input');
      inputTo.type = 'text';
      inputTo.className = 'replace-to';
      inputTo.placeholder = '置換後';
      
      newRow.append(removeBtn, inputFrom, inputTo);
      container.appendChild(newRow);
    }
    
    function replaceText() {
      let text = document.getElementById('inputText').value;
      document.querySelectorAll('.replacement-row').forEach(row => {
        const from = row.querySelector('.replace-from').value;
        const to = row.querySelector('.replace-to').value;
        if (from) { text = text.split(from).join(to); }
      });
      document.getElementById('outputText').value = text;
    }
    
    document.getElementById('addReplacementBtn').addEventListener('click', addReplacementRow);
    document.getElementById('replaceBtn').addEventListener('click', replaceText);
    document.getElementById('copyBtn').addEventListener('click', function() {
      copyToClipboard(this, document.getElementById('outputText').value);
    });
  </script>
</body>
</html>

よく使う置換リスト

筆者がQiita執筆時によく使う置換をリストアップしておきます。

Qiitaで数式を使う
- \( → $
- \) → $
- \[ → ```math
- \] → ```
強調表示を消す
- ** → ""（空白）

まとめ

このツールを使用すれば、ChatGPTをはじめとする生成AIが作成したテキストを、指定フォーマットに合わせて簡単に置換できます。QiitaやMarkdown形式の執筆作業の効率化に役立つため、ぜひ活用してみてください。

また、Markdown AIを使えば、無料で手軽に公開・共有できるので、ぜひ試してみてください。

置換ツールのリンク

https://mdown.ai/content/6ac60af6-e978-4d93-bb31-3cbd90aefc96