Zenn
🌊

連番のHTMLを爆速で書くツールの公開

2025/02/24に公開
HTML
個人開発
ツール
連番
爆速
tech

以下全コード

index.htmlで保存


<!DOCTYPE html>
<html>
<head>
    <style>
        .container { max-width: 800px; margin: 20px auto; padding: 20px; }
        label { display: block; margin: 10px 0 5px; }
        input, textarea { width: 100%; padding: 8px; margin-bottom: 15px; }
        button { padding: 10px 20px; background: #007bff; color: white; border: none; cursor: pointer; }
        button:hover { background: #0056b3; }
        #output { margin-top: 20px; padding: 15px; border: 1px solid #ddd; white-space: pre-wrap; }
    </style>
</head>
<body>
    <div class="container">
        <label for="baseText">ベーステキスト:</label>
        <textarea id="baseText" rows="4" placeholder="例: &lt;div&gt;ITEM_{n}&lt;/div&gt;"></textarea>
        
        <label for="itemCount">生成する個数:</label>
        <input type="number" id="itemCount" min="1" value="5">
        
        <label for="replaceStr">置換する文字列:</label>
        <input type="text" id="replaceStr" placeholder="例: {n}">
        
        <button onclick="generateContent()">生成する</button>
        <div id="output"></div>

        <script>
            function generateContent() {
                const baseText = document.getElementById('baseText').value;
                const count = parseInt(document.getElementById('itemCount').value);
                const replaceStr = document.getElementById('replaceStr').value;
                
                if (!baseText || !count || isNaN(count) || count < 1 || !replaceStr) {
                    alert('全ての入力項目を正確に入力してください');
                    return;
                }

                let output = '';
                const regex = new RegExp(replaceStr, 'g');
                
                for(let i = 1; i <= count; i++) {
                    const currentNumber = i.toString().padStart(2, '0');
                    const replacedText = baseText.replace(regex, currentNumber);
                    output += replacedText + '\n';
                }

                document.getElementById('output').textContent = output;
            }
        </script>
    </div>
</body>
</html>

例えば、こんなのでも


<div class="list">
<figure class="icon"><img src="images/icon{n}.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">サンプル</span>ほにゃほにゃ</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<span class="num">{n}</span>
</div>

5回反復で

{n}を置換設定すると

こうなります


<div class="list">
<figure class="icon"><img src="images/icon01.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">サンプル</span>ほにゃほにゃ</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<span class="num">01</span>
</div>

<div class="list">
<figure class="icon"><img src="images/icon02.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">サンプル</span>ほにゃほにゃ</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<span class="num">02</span>
</div>

<div class="list">
<figure class="icon"><img src="images/icon03.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">サンプル</span>ほにゃほにゃ</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<span class="num">03</span>
</div>

<div class="list">
<figure class="icon"><img src="images/icon04.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">サンプル</span>ほにゃほにゃ</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<span class="num">04</span>
</div>

<div class="list">
<figure class="icon"><img src="images/icon05.png" alt=""></figure>
<h4 class="kazari"><span class="color-check">サンプル</span>ほにゃほにゃ</h4>
<p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p>
<span class="num">05</span>
</div>

Discussion