Tip: Mengubah Semua Teks di dalam Tag CODE menjadi Tautan Pencarian

Jika Anda terbiasa menyisipkan elemen <code> di dalam posting tutorial Anda, jangan sia-siakan kebiasaan rajin dan disiplin tersebut menjadi sesuatu yang tidak memberikan arti khusus. Akan sangat memberikan informasi yang lebih besar jika Anda mengubah semua elemen tersebut menjadi link aktif. Dalam hal ini, kita akan membuat setiap teks yang berada di dalam tag <code> menjadi kata kunci untuk halaman hasil penelusuran dalam situs Anda. Pada intinya konsep ini masih tidak begitu jauh dari konsep Memanfaatkan jQuery untuk Mengizinkan Elemen Terlarang Masuk ke dalam Kometar Blogger. Hanya saja di sini kita harus memahami satu hal penting, yaitu format URL penelusuran di blog Anda:

Blogspot memiliki bentuk URL pencarian seperti ini:

http://www.namablog.com/search/?q=Kata Kunci

Wordpress biasanya memiliki format URL pencarian yang berbeda seperti ini:

http://www.namablog.com/?s=Kata Kunci&submit=Search

Tampilan-tampilan URL seperti itu bisa Anda temukan saat Anda mengetik kata kunci pada kotak pencarian blog, kemudian menekan tombol Submit atau Enter pada keyboard:

Kotak Penelusuran Posting

Oke, kita akan menggunakan format standar URL penelusuran tersebut sebagai bahan nilai atribut href pada elemen <a> yang akan kita sisipkan menggunakan JavaScript setelah ini.

Mengubah Teks di dalam Tag <code> menjadi Link Aktif

Caranya sederhana, kita hanya memerlukan kombinasi fungsi .replaceWith(), .html() dan .text() untuk mengitari elemen <code> dengan elemen <a> yang mengandung nilai href berupa URL pencarian yang mengandung kata kunci teks yang berada di dalam tag <code> secara otomatis. (Tulisan yang cukup panjang).

Pada intinya inilah yang kita inginkan. Kita ingin mengubah kumpulan teks ini:

Lorem ipsum dolor sit <code>amet</code> jabang bayi
oek-oek consectetur <code>kampuang</code> nan jauh dimato
ambo-ambo tempe goreng enak rasanya.

Menjadi seperti ini:

Lorem ipsum dolor sit <a href="//namablog.blogspot.com/search/?q=amet"><code>amet</code></a> jabang bayi
oek-oek consectetur <a href="//namablog.blogspot.com/search/?q=kampuang"><code>kampuang</code></a> nan jauh dimato
ambo-ambo tempe goreng enak rasanya.

Dan dengan metode yang sama persis dengan ini, kita akan mengubah semua teks di dalam elemen <code> menjadi link aktif:

$('div.post-body').children('code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>');
    });
});

Kode di atas akan mengubah semua elemen <code>abc</code> yang merupakan anak level pertama dari elemen div.post-body menjadi <a href='/search/?q=abc'><code>abc</code></a>

Mengapa harus anak pertama? Oke, Anda bisa saja menuliskan kodenya seperti ini:

$('div.post-body code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/search/?q=' + $(this).text() + '"><code>' + $(this).html() + '</code></a>');
    });
});

Tapi terkadang, selain menuliskan teks di dalam <code>, mungkin Anda juga suka/harus menulis teks di dalam tag <pre><code> ... </code></pre>. Jika kita tidak menargetkan elemen <code> yang merupakan anak level pertama saja, maka kemungkinan besar kita akan mengalami masalah seperti ini:

Semua teks yang berada di dalam tag <pre> akan berubah menjadi tautan

Itulah sebabnya mengapa di sini Saya menggunakan fungsi .children() yang hanya akan mencari anak elemen level pertama saja, sehingga elemen <code> yang berada di dalam elemen <pre> tidak akan ikut menjadi tautan karena elemen <code> yang berada di dalam elemen <pre> merupakan anak pertama dari <pre> namun akan menjadi anak ke dua dari <div class='post-body'>.

Atau bisa juga menggunakan metode selektor CSS3 seperti ini:

$('div.post-body > code').each(function() {
    ...
});

Untuk situs tutorial Wordpress bisa menggunakan konsep ini:

$('div.entry-content').children('code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/?s=' + $(this).text() + '&submit=Search"><code>' + $(this).html() + '</code></a>');
    });
});

Pembaharuan: 16 Juli 2012Lebih efisien menggunakan jQuery .wrapInner():

$('div.entry-content').children('code').each(function() {
    $(this).wrapInner('<a href="/?s=' + encodeURIComponent($(this).text()) + '&submit=Search"></a>');
});

Tapi Saya rasa Wordpress tidak memerlukan ini karena mereka bisa melakukan itu dengan PHP. Untuk melihat hasilnya, di sini Saya sudah membuat ilustrasi sederhana menggunakan JSFiddle. Coba Anda klik salah satu teks berupa kode di posting tersebut maka Anda akan langsung diarahkan ke halaman hasil penelusuran posting yang terkait dengan kata kunci itu. Seperti halnya Wikipedia (kurang lebihnya begitu).

Lihat Demo

Pembaharuan

Saat kita menggunakan tanda petik yang tidak terduga di dalam tag <code>, hal-hal aneh semacam ini seringkali akan terjadi:

Konflik kecil karena kesalahan browser di dalam membaca simbol petik ganda yang sama antara fungsi dan karakter biasa.

Itu adalah konflik tanda petik. Jika kita menerapkan satu tipe tanda petik yang sama (petik ganda/petik tunggal) sebagai karakter dan juga sebagai penanda string dalam JavaScript, maka itulah yang akan terjadi. Masalahnya ada di sini, saat JavaScript telah selesai memanipulasi elemen <code>:

<a href="/search/?q=<div id="mama">"><code>&lt;div id="mama"&gt;</code></a>

dan ini adalah apa yang seharusnya terjadi:

<a href="/search/?q=<div id='mama'>"><code>&lt;div id="mama"&gt;</code></a>

Cara paling sederhana untuk mengatasi konflik tersebut adalah dengan menerapkan method .replace() tambahan untuk memastikan bahwa tidak ada tanda petik ganda di dalam atribut href yang bertanda petik ganda Cara paling sederhana untuk mengatasi konflik tersebut adalah dengan memparse konten menjadi karakter URI:

$('div.post-body').children('code').each(function() {
    $(this).replaceWith(function() {
        return $('<a href="/search/?q=' + $(this).text().replace(/\"/g, "'") + '"><code>' + $(this).html() + '</code></a>');
    });
});

$("div.post-body").children("code").each(function() {
    $(this).replaceWith(function() {
        return $("<a href='/search/?q=" + encodeURIComponent($(this).text()) + "'><code>" + $(this).html() + "</code></a>");
    });
});