Cara menghapus Komentar Link Spam diubah menjadi link Internal menggunakan Javascript

Banyak komentar spam berisi link eksternal, bisa diubah menjadi hilang linknya, atau diarahkan ke link tertentu yang kita kehendaki. Ada tiga cara yakni menggunakan Jquary dan Javascript murni. Berikut akan dibagikan ketiga cara tersebut.

Menggunakan Jquery :

Untuk menggunakan Jquery pertama, muat dulu library tersebut, berikut adalah kodenya:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js'/>

Sedangkan kode yang digunakan untuk menghapus link dalam komentar adalah sebagai berikut:

<script>
$(function(){
    $('#comments p').find('a').contents().unwrap().wrap('<a href="#" ></a>');
});
</script>

 Penjelasan:

1. Kode ini menggunakan jQuery, sebuah library JavaScript yang memudahkan manipulasi dan interaksi dengan elemen-elemen pada halaman web.
2. $(function(){}) digunakan untuk menjalankan fungsi saat dokumen HTML telah selesai dimuat.
3. $('#comments p') mengambil semua elemen <p> yang berada di dalam elemen dengan id "comments".
4. .find('a') digunakan untuk mencari semua elemen <a> di dalam elemen <p> yang telah dipilih sebelumnya.
5. .contents() digunakan untuk mendapatkan konten dari setiap elemen <a>, termasuk teks dan elemen lain di dalamnya.
6. .unwrap() digunakan untuk menghapus elemen luar (wrapper) dari setiap konten elemen <a>. Dalam hal ini, wrapper yang dihapus adalah elemen <p>.
7. .wrap('<a href="#" ></a>') digunakan untuk mengelilingi konten setiap elemen <a> dengan elemen <a> baru yang memiliki atribut href="#". Dalam hal ini, elemen <a> baru digunakan sebagai pengganti wrapper yang telah dihapus sebelumnya.
8. Dengan demikian, setelah eksekusi kode, setiap teks atau elemen yang sebelumnya berada di dalam elemen <a> akan tetap ada, tetapi elemen <p> yang membungkusnya akan dihapus dan digantikan oleh elemen <a> baru.

Fungsi dari kode ini adalah untuk menghapus wrapper elemen <p> yang ada di sekitar setiap elemen <a> dalam elemen dengan id "comments" pada halaman web. Selanjutnya, setiap konten elemen <a> akan dikelilingi oleh elemen <a> baru dengan atribut href="#".

Javascript Murni

Berikut adalah kode JavaScript yang setara dengan kode jQuery sebelumnya:

<script>
window.addEventListener('DOMContentLoaded', function() {
  var commentParagraphs = document.querySelectorAll('#comments p');
  commentParagraphs.forEach(function(paragraph) {
    var link = paragraph.querySelector('a');
    var linkContent = link.innerHTML;
    link.parentNode.removeChild(link);
    var newLink = document.createElement('a');
    newLink.setAttribute('href', '#');
    newLink.appendChild(document.createTextNode(linkContent));
    paragraph.appendChild(newLink);
  });
});
</script>

 Penjelasan:

1. Kode ini menggunakan JavaScript murni tanpa mengandalkan library jQuery.
2. window.addEventListener('DOMContentLoaded', function() {}) digunakan untuk menjalankan fungsi saat dokumen HTML telah selesai dimuat.
3. document.querySelectorAll('#comments p') digunakan untuk mengambil semua elemen <p> yang berada di dalam elemen dengan id "comments".
4. .forEach(function(paragraph) {}) digunakan untuk melakukan iterasi pada setiap elemen <p> yang telah dipilih sebelumnya.
5. paragraph.querySelector('a') digunakan untuk mencari elemen <a> di dalam elemen <p> yang sedang diiterasi.
6. link.innerHTML digunakan untuk mendapatkan konten HTML dari elemen <a>.
7. link.parentNode.removeChild(link) digunakan untuk menghapus elemen <a> dari parent (elemen <p>).
8. document.createElement('a') digunakan untuk membuat elemen <a> baru.
9. newLink.setAttribute('href', '#') digunakan untuk mengatur atribut href dari elemen <a> baru menjadi #.
10. newLink.appendChild(document.createTextNode(linkContent)) digunakan untuk menambahkan konten teks (dalam variabel linkContent) ke dalam elemen <a> baru.
11. paragraph.appendChild(newLink) digunakan untuk menambahkan elemen <a> baru ke dalam elemen <p>.

Dengan demikian, kode ini akan mencapai hasil yang sama dengan kode jQuery sebelumnya yaitu menghapus wrapper elemen <p> di sekitar elemen <a>, dan mengelilingi konten setiap elemen <a> dengan elemen <a> baru yang memiliki atribut href="#".

Kode Javascript yang lebih ringkas

Berikut adalah kode JavaScript yang lebih ringkas dengan menggunakan pendekatan modern:
-

1

<script>
document.addEventListener('DOMContentLoaded', () => {
  Array.from(document.querySelectorAll('#comments p a')).forEach(link => {
    link.outerHTML = `<a href="#">${link.innerHTML}</a>`;
  });
});
</script>

-

 Penjelasan:

1. Kode ini menggunakan pendekatan modern dengan menggunakan fungsi panjang Array.from() dan arrow function.
2. document.addEventListener('DOMContentLoaded', () => {}) digunakan untuk menjalankan fungsi saat dokumen HTML telah selesai dimuat.
3. Array.from(document.querySelectorAll('#comments p a')) digunakan untuk mengambil semua elemen <a> yang berada di dalam elemen dengan id "comments" dan mengonversinya menjadi array.
4. .forEach(link => {}) digunakan untuk melakukan iterasi pada setiap elemen <a> yang telah dipilih sebelumnya.
5. link.outerHTML = <a href="#">${link.innerHTML}</a>; digunakan untuk mengganti konten HTML dari elemen <a> dengan HTML baru yang berisi elemen <a> dengan atribut href="#" dan konten yang sama seperti sebelumnya.

Dengan demikian, kode ini mencapai hasil yang sama dengan kode sebelumnya namun lebih ringkas dengan menggunakan fitur-fitur baru yang tersedia dalam JavaScript modern.

Cara menghapus Komentar Link Spam Berubah menjadi link Internal menggunakan Javascript..