Saturday, July 21, 2012

Beberapa Pola Regex Bermanfaat

// email:
    /^([^0-9\.\+])([\w.\+])+\@(([\w\-])+\.)+[a-zA-Z0-9]{2,}/
// url:
    /^(http:\/\/)([\w]+\.){1,}[A-Z]{2,}\b/gi
// creditcard:
    /^[0-9]{16}$/gi
// ccspecial:
    /^[0-9]{12}$/gi
// cvv:
    /^[0-9]{3,4}$/gi
// phone:
    /^[0-9]{10}$/gi
// postcode:
    /^[0-9]{4}$/gi
// numeric:
    /^[0-9]+$/gi
// alphanumeric:
    /^[0-9a-f\-\s]+$/gi
// dob:
    /^([0-9]{1,2}[\/]){2}[0-9]{4}$/g
// macAddress:
    /^([0-9a-fA-F]{2}[:-]){5}[0-9a-fA-F]{2}$/gi
// username:
    /^[a-z0-9\-_\.]{6,12}$/gi
// names:
    /^[a-z\.\-\s\']{1,}$/gi
// nonalpha:
    /[^A-Za-z]+/g
// nonalphanumeric:
    /[^A-Za-z0-9]+/g
// nonnumeric:
    /[^0-9\-\.]/g
// nonnumericExplicit:
    /[^0-9]/g

Sumber: Snipt – Some JS Regexes

Labels: , ,

15 Comments:

At Sunday, July 22, 2012 at 10:52:00 AM GMT+7, Blogger Unknown said...

Ini Fungsinya buat apa mas ?
kok cuma regexnya aja, ngga ada penjelasnnya 7:(

 
At Sunday, July 22, 2012 at 5:18:00 PM GMT+7, Blogger Taufik Nurrohman said...

Untuk mencocokkan pola. Biasanya dalam hal validasi atau manipulasi teks. Contohnya ini. Saya ambil pola alamat email sebagai dasar pola validasi formulir:

function check() {
var pattern = document.getElementById('inp').value;
if (pattern.match(/^([^0-9\.\+])([\w.\+])+\@(([\w\-])+\.)+[a-zA-Z0-9]{2,}/)) {
alert("Email Anda Valid!");
} else {
alert("Tidak valid!");
}
}


Demo: http://jsfiddle.net/2WLCU/4/

Coba ketik sesuatu di dalam elemen input. Kalau penulisan alamat emailnya benar, maka akan muncul pesan bahwa email yang dituliskan valid, jika sebaliknya akan muncul pesan bahwa email tidak valid. Selebihnya ada pola-pola lain seperti pola URL, nomor kartu kredit, dll... bisa juga digunakan untuk hal-hal semacam ini :)

 
At Thursday, July 26, 2012 at 5:30:00 PM GMT+7, Blogger Bakteri said...

Berarti Ini Untuk Checking Char di dalam sebuah input atau lainnya ea ?
wah bagus nie Hihihihi Nice Inpo :D

 
At Thursday, August 2, 2012 at 9:04:00 AM GMT+7, Blogger Arif Rahman said...

ooo.
jadi gitu ya
saya siman dulu kodenya :))

 
At Tuesday, November 20, 2012 at 11:35:00 PM GMT+7, Blogger Unknown said...

Mas mau nanya nih..
saya liat yang regex untuk ganti gambar di Blogger Quick Search Result JSON /\/s[0-9]+\-c/g, "/s" + config.thumbSize + "-c"
itu kalau bentuk yang diganti seperti ini s72-c..
bagaimana kalo bentuknya yang berbeda2 misalnya ada s220,s320,s450 dll..
Terima kasih sebelumnya Mas..

 
At Wednesday, November 21, 2012 at 11:23:00 AM GMT+7, Blogger Taufik Nurrohman said...

Itu kalau gambarnya diambil dari posting secara langsung. Kalau gambarnya diambil dari <data:post.thumbnailUrl/>, semuanya memakai ukuran s72-c (dalam JSON akan tampak sebagai json.feed.entry[i].media$thumbnail.url).

Terkait: Membangun Aplikasi Quick Search dengan JSON Blogger

 
At Wednesday, November 21, 2012 at 11:53:00 AM GMT+7, Blogger Unknown said...

ohh..
sya mau melakukan cara seperti untuk avatar user pada JSON komentar..
klo tidak salah json.feed.entry.author[0].gd$image.src
karena saya liat ada memakai ukuran yang di crop seperti s512-c dll. dan ada pula yang tidak dicrop s220 dll..
klo pake yang /\/s[0-9]+\-c/g berhasil untuk yang di crop tapi tidak berhasil untuk yang s220 dll..
kira2 bagaimana tambahan regexnya??

 
At Wednesday, November 21, 2012 at 12:00:00 PM GMT+7, Blogger Taufik Nurrohman said...

Ini cocok untuk dua pola:

obj.replace(/\/s([0-9]+)(\-c|\/)/, "/s" + thumb_width + "$2");

Pola /sN-c dan /sN/. Cek kode sumber widget Saya yang satu ini

 
At Wednesday, November 21, 2012 at 12:09:00 PM GMT+7, Blogger Unknown said...

Wah terima kasih banyak mas..
Sukses Selalu..

 
At Tuesday, April 9, 2013 at 11:11:00 PM GMT+7, Blogger Unknown said...

membalas komentar mas taufik yang disini http://www.dte.web.id/2012/11/recent-comments-widget-for-blogger-with.html?showComment=1365498780479#c2554180407259125006, karena saya kira lebih cocok untuk di bahas di sini maka saya balas komentar mas di sini saja.

untuk contoh penerapannya gimana mas?
kalau saya pakai yang dari sini http://www.dte.web.id/2012/07/memperbesar-thumbnail-posting.html
tapi malah di load 2x. 1 dari yang s512 dan 1 lagi dari yang ukurannya sudah saya kecilkan.
mohon pencerahannya mas.
makasih.

 
At Wednesday, April 10, 2013 at 11:47:00 PM GMT+7, Blogger Taufik Nurrohman said...

Kode tidak dieksekusi di luar widget, tapi di dalam widget. Lebih tepatnya sebelum gambar dimuat. Widget harus dimodifikasi sendiri. Misalnya kalau di dalam widget terdapat variabel atribut src pada gambar dengan nilai obj[i].media$thumbnail.url seperti ini:

var img = entry[i].media$thumbnail.url;
...
...


Untuk memperkecil resolusi gambar sebelum termuat, ganti kodenya menjadi seperti ini:

var img = entry[i].media$thumbnail.url.replace(/\/s([0-9]+)(\-c|\/)/, "/s" + thumb_width + "$2");
...
...


Di dalam semua widget Blogger yang memiliki thumbnail pasti ada kode yang mirip seperti itu. Variabel thumb_width digunakan untuk menentukan resolusi yang diinginkan:

var thumb_width = 40; // Resolusi gambar 40 x 40
var img = entry[i].media$thumbnail.url.replace(/\/s([0-9]+)(\-c|\/)/, "/s" + thumb_width + "$2");
...
...

 
At Thursday, April 11, 2013 at 12:40:00 PM GMT+7, Blogger Unknown said...

maaf mas, maksud saya sebenarnya itu mau mengubah resolusi avatar di komentar seperti yang mas pakai dari yang semula s512-c menjadi s45-c bukan untuk mengubah ukuran thumbnail di widget dan saya mencoba untuk menggunakan kode yang dari sini http://www.dte.web.id/2012/07/memperbesar-thumbnail-posting.html, tetapi gagal. gambarnya di load 2 kali. saya sudah coba kode yang mas kasi disini http://www.dte.web.id/2012/04/memperbesar-avatarfoto-profil-komentar.html. kodenya seperti ini <script>
(function() {
var ct = document.getElementsByTagName('*'), ava;
for (var i = 0, len = ct.length; i < len; i++) {
if (/( |^)avatar-image-container( |$)/.test(ct[i].className)) {
ava = ct[i].getElementsByTagName('img')[0];
ava.src = ava.src.replace(/\/s[0-9]+\//,"/s32-c/");
}
}
})();
</script>


pakai yang ini juga ga bisa

$('.avatar-image-container img').each(function() {
var src = ($(this).attr('longdesc')) ? $(this).attr('longdesc').replace(/\/s[0-9]+(\-c|\/)/ig,"/s50$1") : $(this).attr('src').replace(/\/s[0-9]+(\-c|\/)/ig,"/s50$1");
$(this).attr('src',src);
});


pakai yang ini apalagi..

var cL = document.getElementById('comments-area'),
c = cL.getElementsByTagName('span');
if (c) {
for (z = 0; z < c.length; z++) {
f = c.item(z).innerHTML;
if (f.indexOf('style="') != -1) {
f = f.replace(/src="http:\/\/img1.blogblog.com\/img\/blank.gif"/, '');
f = f.replace(/display: none/i, '');
f = f.replace(/longdesc=/i, 'src=');
f = f.replace(/\/s[0-9]+\//, '/s50/');
c.item(z).innerHTML = f;
}
}
}


kotak komentar punya saya pakai threaded komentar bertingkat menggunakan css yang mas bagikan beberapa waktu lalu.

kodenya seperti ini

.comments .comment-thread.inline-thread .comment {margin:0px 0px 1px 12%; /* Level 6+ */padding:3px;}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px -15px 1px 10%;} /* Level 6 */
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px -15px 1px 8%;} /* Level 5 */
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px -15px 1px 6%;} /* Level 4 */
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px -15px 1px 4%;} /* Level 3 */
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px -15px 1px 2%; } /* Level 2 */
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px -15px 1px 0%; } /* Level 1 */

 
At Friday, April 12, 2013 at 5:31:00 PM GMT+7, Blogger Taufik Nurrohman said...

Kalau saya pakai yang dari sini http://www.dte.web.id/2012/07/memperbesar-thumbnail-posting.html tapi malah di load 2x

Kalau begitu sama saja. Avatar komentar blog Saya juga kadang-kadang termuat dua kali.

JavaScript harus diletakkan sedekat mungkin dengan seksi komentar, tapi meletakkannya setelah area komentar, bukan sebelumnya. Biasanya yang paling umum kesalahannya adalah orang meletakkan JavaScript di atas </head>.
Itu cuma berlaku untuk beberapa kondisi saja. Lebih baik letakkan JavaScript setelah elemen target:

<div class='comments' id='comments'>
...
</div>
<script>
(function() {
var ct = document.getElementsByTagName('*'), ava;
for (var i = 0, len = ct.length; i < len; i++) {
if (/( |^)avatar-image-container( |$)/.test(ct[i].className)) {
ava = ct[i].getElementsByTagName('img')[0];
ava.src = ava.src.replace(/\/s[0-9]+\//,"/s32-c/");
}
}
})();
</script>

 
At Thursday, September 22, 2016 at 3:07:00 PM GMT+7, Blogger Unknown said...

pola regex ga ada spasi di depan gimana ya? ><

 
At Saturday, September 24, 2016 at 3:13:00 PM GMT+7, Blogger Taufik Nurrohman said...

var x = /^[^\s]*/;

^ awal data
\s karakter spasi termasuk tab dan ganti baris
[^\s] bukan karakter spasi
* karakter apa saja dengan syarat yang sama seperti karakter yang dinyatakan sebelumnya, muncul sekali atau lebih, atau tidak sama sekali.

 

Post a Comment

<< Home