Dua Versi Konverter Html

Published by Concept Phone Kamis, 14 Februari 2019

Membuat konverter HTML dengan JavaScript atau jQuery

Versi JavaScript Mentah

Konverter HTML dengan JavaScript mentah dapat dibentuk dengan mudah. Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin isyarat ini dan letakkan di dalam formulirnya:

<style type="text/css"> #codes {   border:1px solid #666;   width:98%;   height:200px;   margin:5px auto 10px;   display:block; }  .button-group {   margin:0 auto;   text-align:center; } </style> <textarea id="codes" placeholder="Tulis/paste isyarat di sini kemudian klik &#039;Konversi&#039;"></textarea> <div class="button-group">     <button onclick="cdConvert();">Konversi</button>     <button onclick="cdClear();">Bersihkan</button> </div> <script type="text/javascript"> function cdClear() {     var wtarea = document.getElementById('codes');     wtarea.value = ''; }  function cdConvert() {     var ctarea = document.getElementById('codes'),         cv = ctarea.value;     cv = cv.replace(/&/g, "&amp;");     cv = cv.replace(/'/g, "&#039;");     cv = cv.replace(/"/g, "&quot;");     cv = cv.replace(/</g, "&lt;");     cv = cv.replace(/>/g, "&gt;");     ctarea.value = cv;     ctarea.focus();     ctarea.select(); } </script>

Klik Simpan.

Lihat Demo

Versi jQuery

Terserah apakah isyarat ini akan Anda letakkan di dalam halaman statis atau widget, cukup pastikan bahwa tema Anda sudah dilengkapi dengan jQuery, maka konverter HTML ini akan bekerja:

<style type="text/css"> #codes {   border:1px solid #666;   width:98%;   height:200px;   margin:5px auto 10px;   display:block; }  .button-group {   margin:0 auto;   text-align:center; } </style> <textarea id="codes" placeholder="Tulis/paste isyarat di sini kemudian klik &#39;Konversi&#39;"></textarea> <div class="button-group">     <button id="convert">Konversi</button>     <button id="clear">Bersihkan</button> </div> <script type="text/javascript"> $(function() {     $('button#convert').click(function() {         $('textarea#codes').val(         $('textarea#codes').val()             .replace(/&/g, "&amp;")             .replace(/</g, "&lt;")             .replace(/>/g, "&gt;")             .replace(/"/g, "&quot;")             .replace(/'/g, "&#39;")         ).focus().select();         return false;     });     $('button#clear').click(function() {         $('textarea#codes').val('').focus().select();         return false;     }); }); </script>

Klik Simpan.

Lihat Demo

Sumber https://www.dte.web.id/