<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> <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>
