Monday, April 23, 2012

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>

Labels: , , ,

25 Comments:

At Monday, April 30, 2012 at 10:43:00 PM GMT+7, Blogger Unknown said...

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

 
At Tuesday, May 1, 2012 at 10:12:00 AM GMT+7, Blogger Taufik Nurrohman said...

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

http://4.bp.blogspot.com/-IPK0PCkj_7U/T59UHuLSbGI/AAAAAAAAClo/Jgu67pSZc8o/s1600/error-script-placement.png

 
At Tuesday, May 1, 2012 at 5:16:00 PM GMT+7, Blogger Unknown said...

@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"

 
At Sunday, May 20, 2012 at 3:59:00 PM GMT+7, Blogger Ijal Fauzi said...

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

 
At Sunday, May 20, 2012 at 4:28:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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

 
At Sunday, May 20, 2012 at 6:49:00 PM GMT+7, Blogger Ijal Fauzi said...

@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:(

 
At Sunday, May 20, 2012 at 8:30:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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.

 
At Sunday, May 20, 2012 at 8:45:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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

 
At Sunday, May 20, 2012 at 9:33:00 PM GMT+7, Blogger Ijal Fauzi said...

@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:(

 
At Sunday, May 20, 2012 at 9:34:00 PM GMT+7, Blogger Ijal Fauzi said...

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

 
At Sunday, May 20, 2012 at 10:27:00 PM GMT+7, Blogger Taufik Nurrohman said...

@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" ;)

 
At Sunday, June 17, 2012 at 9:42:00 AM GMT+7, Blogger Unknown said...

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 :)

 
At Sunday, July 8, 2012 at 3:44:00 PM GMT+7, Blogger Taufik Nurrohman said...

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

 
At Saturday, November 3, 2012 at 3:22:00 AM GMT+7, Blogger Unknown said...

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.. :)


 
At Saturday, November 3, 2012 at 9:32:00 AM GMT+7, Blogger Taufik Nurrohman said...

Coba pakai ini ⇒ /2012/04/letteringjs-sederhana.html

 
At Thursday, April 11, 2013 at 6:18:00 PM GMT+7, Blogger budkalon said...

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:(

 
At Wednesday, July 3, 2013 at 5:51:00 PM GMT+7, Blogger Mr.Randy said...

kenapa masih gak work yah? :/

 
At Wednesday, July 3, 2013 at 5:51:00 PM GMT+7, Blogger Mr.Randy said...

aq gunain di YPS tapi masih gak work yg nomer 2

 
At Monday, December 16, 2013 at 8:33:00 PM GMT+7, Blogger binkbenk said...

iya belum work.. pakai plugin apa ya?

 
At Tuesday, December 17, 2013 at 8:40:00 AM GMT+7, Blogger you said...

This comment has been removed by the author.

 
At Sunday, March 30, 2014 at 12:16:00 AM GMT+7, Blogger Unknown said...

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!

 
At Monday, March 31, 2014 at 7:21:00 PM GMT+7, Blogger Taufik Nurrohman said...

$('div').addClass('note');

 
At Tuesday, April 1, 2014 at 2:05:00 PM GMT+7, Blogger Unknown said...

Teerimakasih Mas Taufik. :)

 
At Sunday, March 24, 2019 at 5:01:00 PM GMT+7, Blogger Edudetik said...

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

 
At Sunday, September 8, 2019 at 6:07:00 PM GMT+7, Blogger Sekedus said...

kalau versi javascript murni gimana gan?

 

Post a Comment

<< Home