💭

階層多すぎ要素もりもりの致死量HTMLを編集するためのツールを作りました。

2025/02/24に公開

以下編集したいもの

<!-- begin post -->
		<div class="card">
			<a href="post.html">
				<img class="img-fluid" src="assets/img/demopic/5.jpg" alt="">
			</a>
			<div class="card-block">
				<h2 class="card-title"><a href="post.html">SUBTITLE</a></h2>
				<h4 class="card-text">SETUMEIBUN</h4>
				<div class="metafooter">
					<div class="wrapfooter">
						<span class="meta-footer-thumb">
						<a href="author.html"><img class="author-thumb" src="https://www.gravatar.com/avatar/e56154546cf4be74e393c62d1ae9f9d4?s=250&amp;d=mm&amp;r=x" alt="Sal"></a>
						</span>
						<span class="author-meta">
						<span class="post-name"><a href="author.html">Sal</a></span><br/>
						<span class="post-date">22 July 2017</span><span class="dot"></span><span class="post-read">6 min read</span>
						</span>
						<span class="post-read-more"><a href="post.html" title="Read Story"><svg class="svgIcon-use" width="25" height="25" viewbox="0 0 25 25"><path d="M19 6c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v14.66h.012c.01.103.045.204.12.285a.5.5 0 0 0 .706.03L12.5 16.85l5.662 4.126a.508.508 0 0 0 .708-.03.5.5 0 0 0 .118-.285H19V6zm-6.838 9.97L7 19.636V6c0-.55.45-1 1-1h9c.55 0 1 .45 1 1v13.637l-5.162-3.668a.49.49 0 0 0-.676 0z" fill-rule="evenodd"></path></svg></a></span>
					</div>
				</div>
			</div>
		</div>
		<!-- end post -->

致死量です。。。

orz
.
.
.

なので、複数置換エディタを作成しました。

説明文のところを適当なわかりやすい文字列に変えておき、それを置換して編集するようにする。
そうすれば、致死量のHTMLを見て倒れることがなくなると考え作成しました。

初めは、HTML解析機でも作ろうかと悩みましたが、これで落ち着きました。

以下全文

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テキスト一括置換ツール</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            font-family: Arial, sans-serif;
        }

        .section {
            margin-bottom: 20px;
            padding: 15px;
            background: #f5f5f5;
            border-radius: 5px;
        }

        .rule-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        input[type="text"] {
            flex: 1;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        button {
            padding: 8px 15px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background: #0056b3;
        }

        .remove-btn {
            background: #dc3545;
        }

        .remove-btn:hover {
            background: #c82333;
        }

        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            resize: vertical;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="section">
            <h3>ベーステキスト</h3>
            <textarea id="base-input" placeholder="置換対象のベーステキストを入力してください"></textarea>
        </div>

        <div class="section">
            <h3>置換ルール</h3>
            <div id="rules-container">
                <!-- ルール行がここに追加されます -->
            </div>
            <button id="add-rule">ルールを追加</button>
        </div>

        <button id="execute-button">実行</button>

        <div class="section">
            <h3>結果</h3>
            <textarea id="output" readonly></textarea>
        </div>
    </div>

    <script>
        // ルール追加ボタン
        document.getElementById('add-rule').addEventListener('click', () => {
            const ruleRow = document.createElement('div');
            ruleRow.className = 'rule-row';
            
            const fromInput = document.createElement('input');
            fromInput.type = 'text';
            fromInput.placeholder = '置換前の文字列';
            
            const toInput = document.createElement('input');
            toInput.type = 'text';
            toInput.placeholder = '置換後の文字列';
            
            const removeBtn = document.createElement('button');
            removeBtn.textContent = '削除';
            removeBtn.className = 'remove-btn';
            removeBtn.onclick = () => ruleRow.remove();

            ruleRow.appendChild(fromInput);
            ruleRow.appendChild(toInput);
            ruleRow.appendChild(removeBtn);
            
            document.getElementById('rules-container').appendChild(ruleRow);
        });

        // 実行ボタン
        document.getElementById('execute-button').addEventListener('click', () => {
            const baseText = document.getElementById('base-input').value;
            const rules = Array.from(document.getElementsByClassName('rule-row'))
                .map(row => {
                    const inputs = row.getElementsByTagName('input');
                    return {
                        from: inputs[0].value,
                        to: inputs[1].value
                    };
                });

            let result = baseText;
            for (const rule of rules) {
                result = result.split(rule.from).join(rule.to);
            }

            document.getElementById('output').value = result;
        });

        // 初期ルールを1つ追加
        document.getElementById('add-rule').click();
    </script>
</body>
</html>

Discussion