Bungkus/Pisahkan Setiap Baris Kata dengan Elemen

$('div').each(function() {
    var d = $(this).html();
    $(this).html('<p>' + d.replace(/[\r\n]+(?=[^\r\n])/g, '</p><p>') + '</p>');
});

Kode di atas akan mengubah sekelompok teks yang tadinya seperti ini:

<div>Lorem ipsum
dolor sit amet
consectetuer
adipiscing elit.</div>

menjadi seperti ini:

<div><p>Lorem ipsum</p>
<p>dolor sit amet</p>
<p>consectetuer</p>
<p>adipiscing elit.</p></div>

Lihat Demo

Namun kode di atas hanya berlaku untuk ganti baris berupa \r dan \n. Jika Anda sedang berhubungan dengan ganti baris berupa elemen <br>, Anda bisa menggunakan ini:

$('div').contents().filter(function() {
    // Select all textnodes
    return this.nodeType == 3;
}).wrap('<p></p>'); // Place them inside paragraph elements
$('br', 'div').remove(); // Remove the line-break

Lihat Demo


  1. Stackoverflow - How to Strip Out <br> Tags and Wrap Lines with <p> and </p> Tags?
  2. Stackoverflow - jQuery, Remove New Line Then Wrap Textnodes with <p>

25 Komentar

  • Unknown

    Mas apa lagi yang bisa saya lakukan kalau blog percobaan saya udah jadi kayak gini...silahkan lihat http://suwardiunggit.blogspot.com/

  • Taufik Nurrohman

    @Suwardi Unggit Dibener-benerin dulu kode-kode yang merah. Kalau melihat kode sumber menggunakan Firefox akan dengan mudah terlihat:

  • Unknown

    @Taufik Nurrohman Itukan kode Js, scroolTo, dan style punya mas taufik yang saya download terus upload didropbox mas biar bisa di utak atik di dalam komputer gt. Mas itu melihatnya mengunakan software apa ? kalau ctrl+u mengunakan mozilla firefox tidak kelihatan merah dan tidak kelihatan tulisan "link" element between "head" and "body"

    • budkalon

      Kode mas di atas seperti ini:

      <HTML>
      <head>
      ........
      </head>
      <---tempat kode yang anda simpan--->
      <body>
      ........
      </body>
      </HTML>

      Sebaiknya tempatkan seperti ini:

      <HTML>
      <head>
      .......
      <---tempat kode yang sebaiknya anda simpan--->
      </head>
      <body>
      ............
      </body>
      </HTML>

      atau:

      <HTML>
      <head>
      .......
      </head>
      <body>
      .........
      <---tempat kode yang sebaiknya anda simpan--->
      </body>
      </HTML>

      Dan aneh sekali jika link eksternal tersebut bisa beroperasi 7:(

  • Ijal Fauzi

    Mas taufik, gimana kalau bukan setiap baris kata yang dibungkus, melainkan setiap 1 paragraf otomatis dibungkus dengan elemen <p> seperti di wordpress? soalnya kalau di blogger kan ngga otomatis dibungkus elemen <p> :Ozz

  • Taufik Nurrohman

    @Ijal Fauzi Pakai cara yang ke dua, tinggal diganti selektornya saja. Cuma Saya tidak menjamin apakah ini akan berpengaruh pada mesin validasi W3C atau tidak (Ini cuma manipulasi JavaScript):

    $('.post').contents().filter(function() {
    // Select all textnodes
    return this.nodeType == 3;
    }).wrap('<p></p>'); // Place them inside paragraph elements
    $('br', '.post').remove(); // Remove the line-break

    Demo: http://jsfiddle.net/tovic/tQFaQ/1/

    Lagipula, menggunakan tag <br/> juga bukan berarti tidak valid kan?
    Terkadang Saya juga merasa bingung dengan kerja Blogger, karena mereka masih tetap mempertahankan tag <b> dan <i> yang tidak semantik, sedangkan HTML5 lebih terfokus dengan <strong> dan <em>. Tapi Saya yakin mereka mempunyai alasan tersendiri. Menghemat database mungkin haha :p

  • Ijal Fauzi

    @Taufik Nurrohman hmm gitu rupanya, ya saya juga bingung mas. waktu itu saya pernah denger kalo tag <br/> itu ngga valid, jadi saya pengen paragrafnya ada didalam elemen <p> dan elemen itu dikasih margin-bottom supaya lebih rapi gitu lah :/

    ngomong-ngomong kenapa judul blognya ganti jadi Dora The Explorer ? padahal lebih unik Hompimpa deh, menurut saya 7:(

  • Taufik Nurrohman

    @Ijal Fauzi Itulah yang Saya takutkan =( Saat pertama Saya membuat blog ini memang cuma iseng dan Saya sama sekali tidak memiliki tujuan nyata terhadap masa depan blog ini. Sampai setelah berjalan cukup lama, tanggapan yang datang ternyata sangat positif. Saat itu Saya sempat mencoba untuk mengubah namanya menjadi sesuatu yang lebih serius --mengenai logo wajah merah ini, yang sudah Saya buat sejak Saya masih sekolah, entah saat SMP atau SMK Saya lupa. Tapi coretannya sepertinya masih ada-- tapi karena sudah terlanjur dicap sebagai Hompimpa (termasuk dalam salah satu username di sebuah forum) jadi Saya membiarkannya.
    Saya terus menahan rasa galau dalam jiwa raga ini (wew!) sampai sekarang. Rasanya tidak enak juga karena saat Saya menulis, Saya merasa seperti tidak menjadi motivator diri Saya sendiri. Hompimpa Alaihum Gambreng, sama sekali tidak memiliki unsur yang objektif dan tampak mengada-ada. Itu hanya semboyan yang seharusnya disimpan dalam hati dan tidak dituliskan dalam kepala blog. Teralu berat! Yang Saya perlu lakukan hanya menjalani semboyan itu. Jadi Saya putuskan untuk mengubahnya sekarang. Meskipun sepertinya sudah terlambat. Tapi sudahlah, itu cuma nama blog, nama Saya tetap saja Taufik Nurrohman. Dan lagipula, orang-orang yang mengobrol di sini sejak awal juga sudah terbiasa memanggil admin blog ini sebagai Taufik, bukannya Hompimpa atau Dora. Jadi saat itu Saya benar-benar nekat untuk mengganti identitas, untuk mencapai tujuan Saya yaitu menciptakan tokoh/karakter yang lebih kuat dan mudah diingat.

    Dan lagi, Saya membuat blog ini saat Saya berada dalam situasi yang tidak menyenangkan *fck* Semoga dengan cara yang tidak disarankan ini, perlahan-lahan Saya bisa melupakan semua itu. Tapi sayang. Gagal :'(

    Facebook Like masih memakai nama Hompimpa Alaihum Gambreng. Tidak bisa diubah! AARRRGGHHH!!! Biarlah menjadi sejarah. Meski itu akan membuat Saya terus mengingat masa lalu, tapi setidaknya Saya sudah terlepas dari kehidupan lama Saya.

  • Taufik Nurrohman

    @Ijal Fauzi Waktu itu saya pernah denger kalo tag <br/> itu ngga valid, jadi saya pengen paragrafnya ada didalam elemen <p> dan elemen itu dikasih margin-bottom supaya lebih rapi gitu lah :\

    Bukannya tidak valid, cuma tidak semantik. Secara wujud tampak biasa, tapi secara definisi tidak memiliki arti yang sesungguhnya. Maksudnya, setiap orang biasanya akan menuliskan tag <br/> dua kali untuk menciptakan paragraf. Kesimpulannya, tujuan utama mereka menuliskan tag <br/> dua kali adalah untuk membuat paragraf, cuma dalam kasus ini dia menggunakan tag <br/>. Secara wujud memang tampak sebagai paragraf, tapi sebenarnya bukan paragraf. Itu saja inti masalahnya Saya rasa :s

  • Ijal Fauzi

    @Taufik Nurrohman Haha, saya juga pernah kok mas "galau" cuma karena ganti nama blog, akhirnya saya lebih suka pake nama sendiri, hoho. Tapi apa ngga terlanjur udah enak sama hompimpa tuh mas ? 7:(

  • Ijal Fauzi

    Oh, hanya tidak semantik ya, yaudah makasih penjelasannya :D

  • Taufik Nurrohman

    @Ijal Fauzi Tergantung. Apakah kata "enak" di sini dibaca dengan cara yang sama seperti saat kita membaca huruf "e" pada kata "capek" atau dibaca dengan cara yang sama seperti saat kita membaca huruf "e" pada kata "hamburger" ;)

  • Unknown

    Mas saya mau nanya tentang js tapi gak ada hubungannya dgn diatas, gpp kan? :(

    saya punya 2 kode js yaitu kode jam <script type="text/javascript">
    window.setTimeout("jam()",1000);
    function jam() {
    var tanggal = new Date();
    setTimeout("jam()",1000);
    document.getElementById("hasil").innerHTML = tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
    }
    </script>
    <div id="hasil"></div>

    dan kode tanggal <script>
    var mydate=new Date()
    var year=mydate.getYear()
    if (year < 1000)
    year+=1900
    var day=mydate.getDay()
    var month=mydate.getMonth()
    var daym=mydate.getDate()
    if (daym<10)
    daym="0"+daym
    var dayarray=new Array("Minggu","Senin","Selasa","Rabu","Kamis","Jum'at","Sabtu")
    var montharray=new Array("Januari","Februari","Maret","April","Mey","Juni","Juli","Agustus","September","October","November","December")
    document.write("<small><font color='f00088' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+"</b></font></small>")

    </script>

    Nah kedua kode tersebut kalau dipasang dalam 1 area atau dalam 1 kotak widget blog kenapa posisinya selalu atas-bawah gak bisa berdampingan?

    terimakasih mas, maaf ngerepotin :)

  • Taufik Nurrohman

    @Admin Ganti <div id="hasil"></div> dengan <span id="hasil"></span>

  • Unknown

    Mas Taufik mau nanyanih..
    maaf klo salah tempat soalnya tidak tau topik yang sesuai yang mana..
    Begini saya mau membuat judul posting yang memiliki 2 warna, artinya dalam html judul terdapat tag span sehingga dapat saya rubah warnanya dengan css.
    kurang lebih seperti situs ini http://hurufkecil.net/

    karena klo dalam xml template kayaknya tidak bisa deh harus pake javascript ato jquery untuk merubahnya..

    Tolong bantuannya mas.. :)

  • Randy

    kenapa masih gak work yah? :/

    • Randy

      aq gunain di YPS tapi masih gak work yg nomer 2

      • Unknown

        iya belum work.. pakai plugin apa ya?

        • you

          Komentar ini telah dihapus oleh pengarang.

  • Unknown

    Mau nanya mas. kalau misalkan:
    <div>Lorem ipsum
    dolor sit amet
    consectetuer
    adipiscing elit.</div>

    menjadi:
    <div class='note'>Lorem ipsum
    dolor sit amet
    consectetuer
    adipiscing elit.</div>

    Bisa gak Mas???? :)
    Terimakasih!

  • Edudetik

    Mas Taufik bagaimana cara mengubah teks view-source:https://www.dte.web.id/ seperti blog mas, suapaya blog kita tidak tau orang kodenya, http://ddecode.com/hexdecoder/?results=8472c508f23d5edacba375c1d1c04fff
    Terimkasih, saya tunggu jawabanya mas

  • Sekedus

    kalau versi javascript murni gimana gan?

Komentar telah ditutup.