JavaScript Color Picker

Tampilan.

Sebuah plugin pengambil warna sederhana, ditulis dalam bahasa JavaScript mentah, untuk peramban moderen.

Bricks · Tiny Grid Layout Plugin

Efek Masonry dengan JavaScript mentah.

Ekstraksi HTML dan Teks dengan Regex

Ekstraksi Umum

Memisahkan antara tag HTML dengan teks di sekitarnya:

var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
var results = test.match(/(<\/?[-:\w]+(?:\s[^<>]*?)?>)|([^<>]+)/g);

console.log(results);

Hasil:

[
    'foo ',
    '<a b="c">',
    'bar',
    '</a>',
    ' baz ',
    '<b>',
    ' qux yo"s ',
    '<c>',
    '<d>',
    ' wut?'
]

Dengan cara ini Anda dapat melakukan manipulasi teks dengan aman tanpa harus mempengaruhi tag HTML. Caranya adalah dengan mengecek terlebih dahulu apakah anggota merupakan tag HTML atau teks:

var output = "";
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    // Is this a HTML tag or text?
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // this is a HTML tag …
        output += s;
    } else {
        // do something with text …
        output += s.replace(/"/g, '&quot;');
    }
}

console.log(output);

Hasil:

'foo <a b="c">bar</a> baz <b> qux yo&quot;s <c><d> wut?'

Ekstraksi Spesifik

Kode di bawah ini akan memisahkan antara tag HTML dengan nama tertentu saja, sehingga teks bisa saja berisi tag HTML yang diperbolehkan. Ini berguna jika Anda ingin melakukan manipulasi teks di luar tag tertentu saja, misalnya tag <kbd>, <pre>, <script> dan <style>:

var test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? <kbd>ignore this yo"s</kbd>';
var results = [];

test.replace(/(.*?)(<\/?(?:kbd|pre|script|style)(?:\s[^<>]*?)?>|$)/g, function(a, b, c) {
    b && results.push(b);
    c && results.push(c);
});

console.log(results);

Hasil:

[
    'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut? ',
    '<kbd>',
    'ignore this yo"s',
    '</kbd>'
]

Berikut ini adalah cara mengubah karakter " yang berada di luar tag <kbd> menjadi ":

var output = "";
var skip = false;
for (var i = 0, len = results.length; i < len; ++i) {
    var s = results[i];
    if (s && s[0] === '<' && s.slice(-1) === '>') {
        // check whether the HTML tag is an opening or closing tag …
        skip = s[1] && s[1] !== '/';
        output += s;
    } else {
        output += !skip ? s.replace(/"/g, '&quot;') : s; // replace or skip …
    }
}

console.log(output);

Hasil:

'foo <a b=&quot;c&quot;>bar</a> baz <b> qux yo&quot;s <c><d> wut? <kbd>ignore this yo"s</kbd>'

---

Versi PHP

PHP sudah memiliki fungsi khusus untuk menangani tugas ini:

$test = 'foo <a b="c">bar</a> baz <b> qux yo"s <c><d> wut?';
$results = preg_split('#(<\/?[-:\w]+(?:\s[^<>]*?)?>)#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

var_dump($results);

Untuk melakukan ekstraksi tag HTML secara spesifik:

$results = preg_split('#(<\/?(?:kbd|pre|script|style)(?:\s[^<>]*?)?>)#', $test, -1, PREG_SPLIT_NO_EMPTY | PREG_SPLIT_DELIM_CAPTURE);

Menerapkan Fitur Infinite Scroll Sederhana pada Blogger

Fitur ini merupakan contoh nyata penerapan dari potongan kode ini yang kemudian diaplikasikan untuk membuat navigasi halaman AJAX tanpa jQuery seperti pada contoh sebelumnya.

Infinite scroll adalah teknik desain web yang mencegah bar gulir peramban menggulir ke bagian bawah halaman, membuat halaman tumbuh dengan konten tambahan sebagai gantinya.

Plugin ini mengharuskan Anda untuk menentukan empat elemen sebagai target JavaScript. Posting, wadah posting, wadah navigasi halaman dan tautan navigasi halaman berikutnya. Untuk Blogger, elemen target yang paling umum dapat digunakan adalah sebagai berikut:

• .blog-posts
• .date-outer
• .blog-pager
• .blog-pager-older-link

Anda dapat menyesuaikannya nanti berdasarkan markup HTML pada templat Anda.

Plugin ini pada awalnya merupakan plugin untuk CMS Mecha, tapi sebenarnya ini tetap dapat bekerja pada platform yang lain seperti Blogger, dengan sedikit penyesuaian tentunya.

Untuk menerapkannya pada Blogger, salin kode di bawah ini kemudian letakkan di atas </body>:

<b:if cond='data:blog.pageType in [&quot;index&quot;,&quot;archive&quot;]'>
<script src='//cdn.rawgit.com/tovic/infinite-scroll-plugin-for-mecha-cms/v1.1.0/infinite-scroll/assets/sword/infinite-scroll.min.js'></script>
<script>
//<![CDATA[
/*! Simple AJAX infinite scroll by Taufik Nurrohman */
var infinite_scroll = new InfiniteScroll({
    type: 2,
    target: {
        posts: '.blog-posts',
        post: '.date-outer',
        anchors: '.blog-pager',
        anchor: '.blog-pager-older-link'
    },
    text: {
        load: '<a class="js-load" href="javascript:;">Muat Lagi</a>',
        loading: '<span class="js-loading" style="cursor:wait;">Memuat\u2026</span>',
        loaded: '<span class="js-loaded">Dimuat.</span>',
        error: '<a class="js-error" href="javascript:;">Kesalahan.</a>'
    }
});
//]]>
</script>
</b:if>

Simpan perubahan.

Konfigurasi

Data

Keterangan

type

Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.