Cómo crear un plugin para buscar y reemplazar texto con jQuery

Si alguna vez ha utilizado jQuery, es posible que también hayas utilizado al menos uno de sus innumerables plugins. Basta con pensar en algo útil que te gustaría hacer en jQuery, y estoy casi seguro que existirá un plugin para llevarlo a cabo.

A veces, cuando no existe un plugin (por muy difícil que parezca), tendrás que crearlo por ti mismo. Tranquilo, no es tan difícil como parece. En este tutorial, vamos a repasar algunas de las reglas que se deben seguir a la hora de crear un plugin, y después vamos a crear nuestro propio plugin para buscar y reemplazar.

Lo básico

Hay ciertas cosas que debes tener en cuenta al desarrollar plugins. En esta sección, voy a tratar estos aspectos uno por uno. Considera el siguiente fragmento de código:

(function ( $ ) {
    $.fn.functionName = function() {
        return this.addClass("my-class");
    };
}( jQuery ));

Lo primero de todo, habrás notado que estoy utilizando this en vez de $(this) en nuestro plugin. Esto es porque $.fn hace de functionName de la misma manera que un objeto jQuery hace con el método .addClass().

Me explico mejor. Al usar $.fn siempre devolverá un objeto jQuery que contiene todos los métodos que se utilizan en jQuery. Si alguna vez creas tus propios métodos, serán parte de este objeto también. Debido a que tu función es ahora parte del objeto jQuery, puedes utilizar this en lugar de $(this).

En segundo lugar, debes hacer que tu plugin sea encadenable. Esta es una de las muchas características importantes de jQuery que los desarrolladores utilizamos todo el tiempo. Para desarrollar un método en cadena, debes devolver el objeto original jQuery. Esto se puede lograr con sólo anexar un return tal y como hice yo en el código de arriba.

Por último, debes proteger los alias $ y asegurarte de que el uso de tu plugin con otro código JavaScript no de lugar a conflicto. Todo lo que necesitas hacer para asegurarte de que esto no suceda es sólo envolver la función en una expresión de función invocada al igual que he hecho yo en el código de arriba.

Creando el plugin

Una vez tratado lo básico, podemos concentrarnos en la tarea principal: crear el plugin. Vamos a empezar con una versión muy prematura, donde solo reemplazaremos el texto original por un texto predefinido. Aquí tienes el código para llevarlo a cabo:

(function($) {
  $.fn.findReplace = function(options) {
    return this.each(function() {
      $(this).html(
        $(this).html().replace(/Lorem Ipsum/g, "Replacement")
      );
    });
  };
}(jQuery));

Utilizo expresiones regulares para todas las ocurrencias de Lorem Ipsum, para reemplazarlo con Replacement. Para ser honesto, en esta forma, nuestro plugin es totalmente inoperativo. Los usuarios deberían al menos tener la opción de encontrar un trozo de texto y luego reemplazarlo con otro texto de su elección.

En este punto, hay que contemplar la capacidad de aceptar varias opciones. Vamos a proporcionar a los usuarios tres opciones: un texto a encontrar, el texto a sustituir, y la capacidad de fijar el color de fondo del texto reemplazado. También puedes utilizar la oportunidad para establecer los valores por defecto de dichos parámetros, en caso de que los usuarios consciente o inconscientemente no los establezcan por sí mismos. Aquí está el código para hacerlo:

var settings = $.extend({
    // These are the defaults.    
    findText: null,
    replaceText: "",
    backgroundColor: "#FFF"
}, options);

He establecido findText a nulo. Para replaceText, una cadena vacía tiene más sentido ya que si un usuario no pasa el valor para sustituir, tal vez él o ella sólo quería que estuviese vacía. El valor más apropiado para backgroundColor será el color de fondo de la página web, que en la mayoría de los casos es de color blanco. También puedes poner ciertos controles para notificar a los usuarios si se olvidaron de pasar dichos parámetros.

Para utilizar estos valores, tendremos que cambiar nuestro código del plugin original. Nuestro código ahora quedaría así:

return this.each(function() {
  var StringToFind = settings.findText;
  var regExpression = new RegExp(StringToFind, "g");
  var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";
  $(this).html(
    $(this).html().replace(regExpression, replacement)
  );
});

Podemos acceder al texto que debe ser encontrado mediante setting.findText. Se almacena en una variable para su posterior uso. Estoy utilizando el constructor de RegExp para crear un objeto de una expresión regular. Esto puede ser utilizado para reemplazar dinámicamente texto con expresiones regulares.

Utilizando el modificador global te aseguras de que todas las coincidencias de StringToFind se sustituyen. He incluido la sustitución de texto en un elemento span con estilo inline. Por último, modifico el código HTML del elemento que llamó a nuestra función findReplace.

Haciendo mejoras

Nuestro pequeño plugin ya funciona perfectamente. Es posible hacerlo aún más impresionante con ciertas modificaciones. Ya hemos proporcionado la opción de cambiar el color de fondo de los elementos sustituidos.

Sin embargo, si los usuarios deciden cambiar el tamaño de la fuente, añadir algo de padding o hacer otros cambios, no podrán. También es práctico proporcionar todas estas opciones. Lo que vamos a hacer es dar a los usuarios la posibilidad de añadir una clase a su elección para los elementos sustituidos. De esta manera pueden realizar los cambios que quieran en sus propios CSS, y nuestro plugin será más ligero aún.

Todo lo que tiene que hacer es modificar la opción de backgroundColor de nuestra versión anterior a CustomClass en los lugares correspondientes.

var settings = $.extend({
  findText: null,
  replaceText: "",
  backgroundColor: "#FFF"
}, options);
// Should Now Be
var settings = $.extend({
  findText: null,
  replaceText: "",
  customClass: ""
}, options);
 
 
var replacement = "<span style='background:" + settings.backgroundColor + ";'>" + settings.replaceText + "</span>";
// Should Now Be
var replacement = "<span class='" + settings.customClass + "'>" + settings.replaceText + "</span>";

Fuente: Monty Shokeen

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR