JavaScriptで作る「文字置き換えフォーム」

文字置き換えフォーム
1. 出力:
ソースコード

文字置き換えフォーム

入力テキスト:

置換前:

置換後:

出力:

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文字置き換えフォーム</title>
    <style>
        body { font-family: sans-serif; padding: 1em; }
        textarea { width: 100%; height: 100px; margin-bottom: 1em; }
        input[type="text"] { width: 45%; margin: 0.5em 0; }
        button { margin-right: 0.5em; }
        #output { white-space: pre-wrap; background: #f0f0f0; padding: 1em; min-height: 3em; }
    </style>
</head>
<body>
    <h2>文字置き換えフォーム</h2>

    <label>入力テキスト:</label><br>
    <textarea id="inputText"></textarea><br>

    <label>置換前:</label><br>
    <input type="text" id="searchText"><br>

    <label>置換後:</label><br>
    <input type="text" id="replaceText"><br>

    <button onclick="replaceText()">置換する</button>
    <button onclick="clearForm()">クリア</button>

    <h3>出力:</h3>
    <div id="output"></div>

    <script>
        function replaceText() {
            const input = document.getElementById("inputText").value;
            const search = document.getElementById("searchText").value;
            const replace = document.getElementById("replaceText").value;
            const escapedSearch = search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            const regex = new RegExp(escapedSearch, "g");
            const result = input.replace(regex, replace);
            document.getElementById("output").textContent = result;
        }

        function clearForm() {
            document.getElementById("inputText").value = "";
            document.getElementById("searchText").value = "";
            document.getElementById("replaceText").value = "";
            document.getElementById("output").textContent = "";
        }
    </script>
</body>
</html>