<form class="replace-tool"> <label>Kode sebelum konversi：<br><textarea id="inputCode" placeholder="Masukkan kode gambar disini"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/.../.../s1200/image.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="630" data-original-width="1200" height="168" src="https://blogger.googleusercontent.com/img/b/.../.../s320/image.png" width="320" /></a></div></textarea></label> <label>Kode yang dikonversi：<br><textarea id="outputCode" placeholder="Kode yang dikonversi akan ditampilkan disini"></textarea></label> <div class="replace-menu" data-title="Hapus/tambahkan elemen"> <label><input type="radio" name="tag" value="option1"/> Hapus div</label> <label><input type="radio" name="tag" value="option2"/> Hapus a</label> <label><input type="radio" name="tag" value="option3"/> Hapus div dan a</label> <label><input type="radio" name="tag" value="option4"/> Tambahkan gambar dan sumber</label> <label><input type="radio" name="tag" value="option5"/> Tambahkan gambar dan keterangan gambar</label> <label><input type="radio" name="tag" value="option6"/> Tambahkan gambar, keterangan gambar, gambar, sumber</label> </div> <div class="replace-menu" data-title="hapus atribut"> <label><input type="checkbox" name="attr" value="option1"/>Hapus div style</label> <label><input type="checkbox" name="attr" value="option2"/>Hapus a dan tautan gambar</label> <label><input type="checkbox" name="attr" value="option3"/>Hapus img border dan data-original-width/height</label> </div> <button type="button" onclick="replaceCode()">Konversi</button> <button type="button" onclick="deselectOptions()">Batalkan pilihan</button> <button type="button" onclick="copyReplacedCode()">Salin kode</button> <button type="reset">Reset</button> </form> <style>.replace-tool{max-width:800px;margin:20px auto;padding:20px;background-color:#e0f7fa;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,.1);color:#212121}.replace-tool label{display:block;margin-bottom:8px;font-weight:500;color:#cbd5e0}.replace-tool textarea{width:100%;padding:10px;margin-bottom:20px;border:1px solid #81d4fa;border-radius:8px;resize:vertical;font-family:monospace;font-size:14px}.replace-tool textarea:focus{outline:0;box-shadow:0 0 5px rgba(0,145,234,.3);border-color:#a0aec0;box-shadow:0 0 5px rgba(160,174,192,.3)}.replace-menu{margin-bottom:20px;padding:15px;border:1px solid #4a5568;border-radius:8px;background-color:#374151}.replace-menu label{margin-right:15px;display:inline-block;color:#f7fafc}.replace-menu input[type=checkbox],.replace-menu input[type=radio]{margin-right:5px;vertical-align:middle}.replace-tool button{padding:10px 20px;margin-right:10px;border:none;border-radius:8px;cursor:pointer;font-size:16px;transition:background-color .3s}.replace-tool h2{text-align:center;margin-bottom:20px;font-size:24px}.replace-tool p{margin-bottom:20px;font-size:16px}[data-theme=dark][data-color-scheme*=gradient] .replace-tool{background-color:#1f2021;color:#f7fafc;box-shadow:0 4px 8px rgba(0,0,0,.5)}.replace-tool textarea{border-color:#4a5568;background-color:#232e3c;color:#f7fafc;overflow:auto;min-height:100px;height:auto}.replace-menu[data-title]::before{content:attr(data-title);display:block;margin-bottom:10px;font-weight:700;color:#cbd5e0}.replace-tool button{background-color:#0091ea;color:#fff}.replace-tool button:hover{background-color:#0077c2}.replace-tool button:active{background-color:#005691}.replace-tool h2,.replace-tool p{color:#f7fafc}</style> <script> function replaceCode() { const inputArea = document.querySelector('.replace-tool #inputCode'); const outputArea = document.querySelector('.replace-tool #outputCode'); let outputCode = inputArea.value; const selectedTag = document.querySelector('.replace-tool input[name="tag"]:checked'); if (selectedTag) { switch (selectedTag.value) { case 'option1': outputCode = outputCode.replace(/<div class=["']separator["'].+?>(<a.+?><img.+?\/><\/a>)<\/div>/g, '$1\n'); break; case 'option2': outputCode = outputCode.replace(/(<div class=["']separator["'].+?>)<a.+?>(<img.+?\/>)<\/a>(<\/div>)/g, '$1$2$3\n'); break; case 'option3': outputCode = outputCode.replace(/<div class=["']separator["'].+?><a.+?>(<img.+?\/>)<\/a><\/div>/g, '$1\n'); break; case 'option4': outputCode = outputCode.replace(/<div class=["']separator["'].+?><a.+?><img\s(.*?)src=["'](.+?\/[swh]\d{1,4}.*?)(\/.+?)["']\s*(.*?)\s*\/><\/a><\/div>/g, '<picture>\n <source srcset="$2-rw-e365$3" type="image/webp"/>\n <img loading="lazy" $1 src="$2-e365$3" $4/>\n</picture>\n'); break; case 'option5': outputCode = outputCode.replace(/<div class=["']separator["'].+?><a.+?>(<img.+?\/>)<\/a><\/div>/g, '<figure>\n $1\n <figcaption>Caption</figcaption>\n</figure>\n'); break; case 'option6': outputCode = outputCode.replace(/<div class=["']separator["'].+?><a.+?><img\s(.*?)src=["'](.+?\/[swh]\d{1,4}.*?)(\/.+?)["']\s*(.*?)\s*\/><\/a><\/div>/g, '<figure>\n <picture>\n <source srcset="$2-rw-e365$3" type="image/webp"/>\n <img loading="lazy" $1 src="$2-e365$3" $4/>\n </picture>\n <figcaption>Caption</figcaption>\n</figure>\n'); break; } } const selectedAttr = document.querySelectorAll('.replace-tool input[name="attr"]:checked'); selectedAttr.forEach(a => { switch (a.value) { case 'option1': outputCode = outputCode.replace(/(?<=<div class=["']separator["'])\sstyle=["'].*?["'](?=.*?>)/g, ''); break; case 'option2': outputCode = outputCode.replace(/(?<=<a\s.*?)\s(style|imageanchor)=["'].+?["'](?=.*?>)/g, ''); break; case 'option3': outputCode = outputCode.replace(/(?<=<img.*?)\s(border|data-original-(width|height))=["'].+?["'](?=.*?\/>)/g, ''); break; } }) outputArea.value = outputCode } function deselectOptions() { document.querySelectorAll('.replace-tool input[name]:checked').forEach(c => { c.checked = false }) } function copyReplacedCode() { const outputCode = document.querySelector('.replace-tool #outputCode').value; navigator.clipboard.writeText(outputCode).then(() => { alert('Berhasil menyalin') }).catch(() => { alert('Gagal menyalin') }) } </script>
