ウェブ家の備忘録

ウェブデザイナーの備忘録

「"」「'」「`」の中のテキストを検索して抽出するツール

HTML JavaScript CSS

■あらまし

　VBにてエラーメッセージ「String"+"から型'Decimal'への変換は無効です。」が出る。
　何千行もある全ソースコードの"～"の中の+を全部探さなければならなくなって、その物量にめまい。
　……じゃあツール作るか。その方が労力少ないわ。
　正直自力で作るほどの精神的労力がないので、今回は自力ではなくChatGPTを使った他力で作りました。プロンプトエンジニアリングです。

            • ▼▼▼プロンプト

ツールを作りたい。

■言語
HTML・JavaScript

■仕様
・上部に検索条件のﾃｷｽﾄﾎﾞｯｸｽ。検索条件の下の左半分width:49.5%;heightは検索条件のﾃｷｽﾄﾎﾞｯｸｽに干渉しないようにしつつウィンドウ最大までのサイズでﾃｷｽﾄﾎﾞｯｸｽでインプット、検索条件の下の右半分width:49.5%;heightは検索条件のﾃｷｽﾄﾎﾞｯｸｽに干渉しないようにしつつウィンドウ最大までのサイズでアウトプットを出力。
・インプットのﾃｷｽﾄﾎﾞｯｸｽ中の「"」「'」「`」の開始を調べ、「"」「'」「`」の終了までの間に検索条件のﾃｷｽﾄﾎﾞｯｸｽに書かれた内容があるか調べる。その検索条件が見つかったら「行数：行内容（行の頭のインデントは省く）」をアウトプットに出力する。もし終了の「"」「'」「`」がない場合はアウトプットには出力しない。なお、「"」「'」「`」はその行に複数回含まれたり、ネストされている場合がある。インプットに「'あああ"いい"」とある場合、「'」以降に検索条件が合致していても「'」の終了がないため、出力しない。「'」より前に検索条件に合致してたら出力する。
・検索条件が空白の場合、アウトプットにはなにも出力しない。
・アウトプットはで出力。
・アウトプットの行が長くても折り返さない。

■ChatGPTの出力
HTMLにJavaScriptを組み込んだコードが欲しい。
ソースコードを出力してほしい。ソースコードをダウンロードする形式ではない。


<!DOCTYPE html>
<html>
<head>
    <title>テキスト検索ツール</title>
    <style>
        #input, #output {
            width: 49.5%;
            height: calc(100vh - 40px); /* テキストボックスの高さとマージンを差し引く */
            float: left;
            overflow: auto;
            white-space: nowrap;
        }
        #output {
            border-left: 1px solid #ccc;
        }
        #searchTerm {
            width: 100%;
            margin-bottom: 20px;
        }
        tt {
            font-family: monospace;
            margin: 0; /* マージンをゼロに */
            padding: 0; /* パディングをゼロに */
            display: block; /* 各行をブロック要素として扱う */
            line-height: 1.2; /* 行間の高さを調整 */
        }
    </style>
</head>
<body>
    <input type="text" id="searchTerm" placeholder="検索条件を入力">
    <textarea id="input" placeholder="ここにテキストを入力"></textarea>
    <div id="output"></div>
    
    <script>
        function escapeHtml(text) {
            return text
                .replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;")
                .replace(/'/g, "&#039;");
        }
        
        function searchAndDisplay() {
            var searchTerm = document.getElementById('searchTerm').value;
            var inputText = document.getElementById('input').value;
            var outputDiv = document.getElementById('output');
            outputDiv.innerHTML = '';
            
            if (!searchTerm) return;
            
            var lines = inputText.split('\n');
            var regex = new RegExp('(["\'`]).*?\\1', 'g');
            lines.forEach(function(line, index) {
                var matches;
                while ((matches = regex.exec(line)) !== null) {
                    if (matches[0].includes(searchTerm)) {
                        var cleanedLine = line.replace(/^\s+/g, '');
                        outputDiv.innerHTML += '<tt>行' + (index + 1) + ': ' + escapeHtml(cleanedLine) + '</tt>';
                    }
                }
            });
        }
        
        document.getElementById('input').addEventListener('input', searchAndDisplay);
        document.getElementById('searchTerm').addEventListener('input', searchAndDisplay);
    </script>
</body>
</html>
            • ▼▼▼留意点

VBの場合コメントアウトが「'」。その行に二重でコメントアウトがある場合は「'～'」が検索条件の対象になってしまう。(まあそうないけど。そこの所まで機能実装されたい方はソースコードいじって色々してみてください。)

            • ▼▼▼出力