Menambahkan Ganti Baris Otomatis Javascript ˂p˃ di awal baris data dan ˂/p˃ di akhir baris

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat website interaktif dan dinamis. Bahasa pemrograman ini pertama kali diperkenalkan pada tahun 1995 oleh Brendan Eich selama bekerja di Netscape Communications Corporation. Saat ini, JavaScript telah menjadi salah satu bahasa pemrograman yang paling populer di dunia dan digunakan oleh banyak developer untuk membuat berbagai macam aplikasi web.

Salah satu kelebihan JavaScript adalah kemampuannya untuk memanipulasi halaman web secara dinamis. Dengan JavaScript, Anda dapat membuat efek animasi, mengubah warna, mengganti teks, dan banyak lagi. Selain itu, JavaScript juga memungkinkan Anda untuk membuat interaksi antara pengguna dan website, seperti form yang bisa diisi dan tombol yang bisa diklik.

Berikut adalah contoh kode JavaScript untuk menambahkan tag <p> di awal dan akhir baris pada data yang diberikan:

Kode berikut akan membuat variabel result yang berisi data yang sudah ditambahkan tag <p> di awal dan akhir barisnya. Anda bisa menampilkan hasilnya di console atau memasukkan variabel result ke dalam elemen HTML yang diinginkan.

Hasilnya akan menjadi seperti ini:

<p>Agama</p> <p>Air</p> <p>Akuntansi</p> <p>ARSITEKTUR</p> <p>Artikel</p> <p>Bahasa Indonesia</p> <p>Bahasa Tips</p> <p>USAHA</p>

Berikut adalah contoh kode JavaScript untuk menambahkan tag <p> pada awal dan akhir setiap baris dalam elemen dengan id "data":

---

Dari Program di atas, ditambahkan, jika ada baris kosong, maka baris tersebut dihapus.

Kode tersebut akan mengambil isi teks dari elemen dengan id "data", kemudian memisahkan setiap baris menjadi array menggunakan fungsi split('\n'). Selanjutnya, kode akan melakukan iterasi pada setiap baris, menambahkan tag <p> pada awal dan akhir setiap baris, dan menggabungkan semua baris menjadi satu string HTML. Akhirnya, hasilnya akan ditetapkan kembali pada elemen dengan id "data".

Anda bisa menambahkan CSS di atas ke dalam tag <style> pada bagian head HTML. Selain itu, Anda juga harus menambahkan class dan id yang sesuai pada elemen HTML untuk memastikan CSS dapat diterapkan dengan baik.

Anda bisa menambahkan kondisi if di dalam fungsi map untuk memeriksa apakah nilai item kosong atau tidak. Jika kosong, maka tidak akan ditambahkan tag <p> dan </p>. Berikut adalah contohnya:

function processData() { const inputElement = document.getElementById("input"); const outputElement = document.getElementById("output"); const inputData = inputElement.value.split("\n"); const processedData = inputData .map(item => { if (item.trim() !== "") { return `<p>${item}</p>\n`; } else { return ""; } }) .join(""); outputElement.value = processedData; }

Pada contoh di atas, kita menggunakan trim() untuk menghapus spasi di awal dan akhir string, kemudian memeriksa apakah string tersebut kosong setelah dihapus spasi. Jika tidak kosong, maka ditambahkan tag <p> dan </p>. Jika kosong, maka tidak ada tag yang ditambahkan.