Javascript Find And Replace Text In Html

Javascript Find And Replace Text In Html

4 min read Jun 20, 2024
Javascript Find And Replace Text In Html

Mengganti Teks dalam HTML dengan JavaScript

JavaScript menawarkan berbagai cara untuk menemukan dan mengganti teks dalam elemen HTML. Berikut adalah beberapa metode yang paling umum:

1. Menggunakan innerHTML

Metode ini memungkinkan Anda untuk mengakses dan memodifikasi seluruh HTML dalam suatu elemen. Anda dapat menggunakan metode replace() pada properti innerHTML untuk mencari dan mengganti teks.

Contoh:

const paragraph = document.getElementById("myParagraph");
const originalText = paragraph.innerHTML;
const newText = originalText.replace("lama", "baru");
paragraph.innerHTML = newText;

Penjelasan:

  • document.getElementById("myParagraph") mengambil elemen HTML dengan ID "myParagraph".
  • innerHTML mengambil konten HTML elemen tersebut.
  • replace("lama", "baru") mengganti semua instance "lama" dengan "baru" dalam konten HTML.
  • paragraph.innerHTML = newText menetapkan konten HTML yang baru ke elemen.

2. Menggunakan textContent

Metode ini serupa dengan innerHTML, tetapi hanya bekerja dengan teks biasa dalam elemen, bukan konten HTML. Ini ideal untuk mengubah teks tanpa mempengaruhi struktur HTML.

Contoh:

const paragraph = document.getElementById("myParagraph");
const originalText = paragraph.textContent;
const newText = originalText.replace("lama", "baru");
paragraph.textContent = newText;

Penjelasan:

  • document.getElementById("myParagraph") mengambil elemen HTML dengan ID "myParagraph".
  • textContent mengambil konten teks elemen tersebut.
  • replace("lama", "baru") mengganti semua instance "lama" dengan "baru" dalam teks.
  • paragraph.textContent = newText menetapkan teks yang baru ke elemen.

3. Menggunakan Regular Expression

Regular Expression (RegEx) memungkinkan pencarian dan penggantian yang lebih canggih. Anda dapat menggunakan metode replace() dengan RegEx untuk menemukan dan mengganti pola teks yang lebih kompleks.

Contoh:

const paragraph = document.getElementById("myParagraph");
const originalText = paragraph.innerHTML;
const newText = originalText.replace(/lama/g, "baru");
paragraph.innerHTML = newText;

Penjelasan:

  • /lama/g adalah regular expression yang mencari semua instance "lama" dalam teks.
  • g adalah flag global yang memastikan semua instance "lama" diganti.

4. Menggunakan Node.replaceChild()

Metode ini memungkinkan Anda untuk mengganti seluruh node HTML dengan yang baru.

Contoh:

const paragraph = document.getElementById("myParagraph");
const newParagraph = document.createElement("p");
newParagraph.textContent = "Teks baru";
paragraph.parentNode.replaceChild(newParagraph, paragraph);

Penjelasan:

  • document.createElement("p") membuat elemen <p> baru.
  • newParagraph.textContent = "Teks baru" menetapkan teks yang baru ke elemen baru.
  • paragraph.parentNode.replaceChild(newParagraph, paragraph) mengganti elemen lama dengan elemen baru.

5. Menggunakan Node.cloneNode()

Metode ini memungkinkan Anda untuk membuat salinan dari suatu node HTML, termasuk semua teks dan anak-anaknya. Anda dapat menggunakan metode ini untuk mengkloning node dan kemudian mengubah teks dalam salinan tersebut.

Contoh:

const paragraph = document.getElementById("myParagraph");
const newParagraph = paragraph.cloneNode(true);
newParagraph.textContent = newParagraph.textContent.replace("lama", "baru");
paragraph.parentNode.replaceChild(newParagraph, paragraph);

Penjelasan:

  • paragraph.cloneNode(true) membuat salinan lengkap dari elemen <p>.
  • newParagraph.textContent = newParagraph.textContent.replace("lama", "baru") mengganti teks dalam salinan tersebut.
  • paragraph.parentNode.replaceChild(newParagraph, paragraph) mengganti elemen lama dengan salinan yang baru.

Kesimpulan:

Metode-metode di atas memberikan fleksibilitas dalam mengganti teks dalam HTML dengan JavaScript. Pilih metode yang sesuai dengan kebutuhan Anda dan struktur HTML yang Anda kerjakan.

Related Post