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:

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

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:

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:

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

$('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>');
    });
});

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

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