Mengganti Beberapa Teks Sekaligus Tanpa Merusak Elemen DOM

jQuery .textWalk() Plugin
jQuery :: Mengganti Beberapa Teks (Hanya Teks) Sekaligus tanpa Merusak Elemen DOM

Ini adalah kombinasi dari kode yang Saya temukan di sini dan juga kode yang pernah Saya dokumentasikan di sini. Meskipun kita bisa menggunakan fungsi .textWalk() berkali-kali seperti ini:

jQuery.fn.textWalk = function(fn) {
    this.contents().each(jwalk);
    function jwalk() {
        var nn = this.nodeName.toLowerCase();
        if (nn === '#text') {
            fn.call(this);
        } else if (this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== 'script' && nn !== 'textarea') {
            $(this).contents().each(jwalk);
        }
    }
    return this;
};

$('body').textWalk(function() {
    this.data = this.data.replace('Lorem', 'Love');
    this.data = this.data.replace('consequat', 'consequence');
    this.data = this.data.replace('at vero', 'at the shop');
    this.data = this.data.replace('nihil', 'ZERO man... ZEROO!!!');
    this.data = this.data.replace('click me', 'Mamamiaaa!!!');
    this.data = this.data.replace('My Blog', 'My Kingdom');
});

Tapi seandainya kita bisa membuatnya lebih pendek, seharusnya ini akan menjadi lebih efisien seperti yang pernah dikatakan oleh seseorang dengan nama pengguna gilly3:

You need to use a regular expression with the global option set to replace all of the instances. But, you can also simplify this code a bit and get rid of the loop. Instead of Arrays, use an object - Stackoverflow

Anda perlu menggunakan regex dengan opsi global yang ditetapkan untuk menggantikan semua contoh. Tapi, Anda juga dapat menyederhanakan kode ini sedikit dan menyingkirkan loop. Dibandingkan menggunakan Array, gunakanlah object.

Saya tidak begitu mengerti dengan jelas mengenai istilah-istilah itu :p Saya hanya mencoba mengombinasikan dua artikel itu dan ternyata berhasil!

var array = {
    "Lorem"     : "Love",
    "consequat" : "consequence",
    "at vero"   : "at the shop",
    "nihil"     : "ZERO man... ZEROO!!!",
    "click me"  : "Mamamiaaa!!!",
               ...
               ...
               ...
               ...
               ...
               ...
               ...
    "My Blog"   : "My Kingdom"
}

jQuery.fn.textWalk = function(fn) {
    this.contents().each(jwalk);
    function jwalk() {
        var nn = this.nodeName.toLowerCase();
        if (nn === '#text') {
            fn.call(this);
        } else if (this.nodeType === 1 && this.childNodes && this.childNodes[0] && nn !== 'script' && nn !== 'textarea') {
            $(this).contents().each(jwalk);
        }
    }
    return this;
};

$('body').textWalk(function() {
    for (var val in array) {
        this.data = this.data.replace(new RegExp(val, "g"), array[val]);
    }
});

Lihat Demo

3 Komentar

  • Beben Koben

    WOW gaya lagi...replace text euy...mancappp \m/

  • budkalon

    Kalau untuk memfilter(mengubah) kata-kata di dalam komentar gimana? Misalnya sang pengomentar mengomentari: "aku lorem!" Dan setelah dipublish, komentarnya berubah menjadi: "aku love!" mohon bantuannya :D

    • budkalon

      AH! Sudah bisa :D

      Tinggal mengganti yang ini:
      $('body').textWalk(function() {
      for (var val in array) {
      this.data = this.data.replace(new RegExp(val, "g"), array[val]);
      }
      });

      Menjadi:
      $('#comment-holder').textWalk(function() {
      for (var val in array) {
      this.data = this.data.replace(new RegExp(val, "g"), array[val]);
      }
      });

      :D

Komentar telah ditutup.