jQuery - Simulando Snippets.

Hola, no he dejado abandonado esto.. Últimamente ando algo liado entre un addOn y varios proyectos que tengo. Hoy decidí agregarle al addOn la funcionalidad de snippets.

¿Que es un snippet?

Digamos que la funcionalidad de un snippet es almacenar un valor y luego mostrarlo cuando haga falta. Asi por ejemplo si yo hago un snippet que se llame "hola" y que su valor sea "Hola mundo", al llamar a hola se imprimiría o retornaría "Hola mundo".

Es muy útil en los foros donde tienes que responder varias veces lo mismo o simplemente quieres evitarte escribir muchas veces lo mismo.

En jQuery

Supongamos que tenemos un campo de texto donde un usuario puede escribir cualquier cosa. Queremos reducir el trabajo de dicho usuario añadiendo una serie de palabras clave que se convertirían en un texto mucho mayor. Asi al usuario introducir dichas palabras clave le ahorraríamos el tener que escribir todo el texto.

Supongamos que tenemos un documento HTML así:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>POC Snippets</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
   body {text-align:center;}
   textarea {width:500px; height:400px;}
</style>
</head>
<body>
   <h1>Texto</h1>
   <textarea id="mitexto"></textarea>
</body>
</html>

Ahora añadiremos un array con el que definiremos las palabras clave y su valor.

var snippets = [
      ['@lorem','Lorem ipsum dolor sit amet, consectetur adipisicing elit.'],
      ['@hola','Hola Mundo!']
];

Como podéis ver utilizamos @palabra. Al añadir la arroba(@) evitamos reemplazar las palabras cuando no sea necesario.

Bien, vamos a crear la función que se encargara de procesar dichos snippets.

// Reciberemos el array de snippets y el elemento donde vamos a procesar el texto.
var snippet_r = function(snippets,element){
   // Por cada snippet...
   for(var i=0;i
Es importante mencionar que la ultima linea del código de arriba, contiene una arroba(@) que es la arroba de la que hablamos mas arriba. Además, usamos val(); suponiendo que se trata de un campo de texto. Si es un div o otro elemento deberemos usar html() o text(). 

Bien, ahora vamos a agregar un evento que se quedara a la espera de la pulsación de una tecla. De esta forma, cuando el usuario escriba la palabra y quiera activar el snippet podrá pulsar dicha tecla y nuestra función lo sustituirá.
$(document).ready(function() {
   // Por cada tecla pulsada...
   $('#mitexto').bind('keypress',function(e){
      // Si es el code 32 (espacio).. activar la función.
      if(e.which==32){ snippet_r(snippets,'#mitexto');}
   });
});


Bueno, sin mas esto es una manera bastante simple de como simular snippets en JavaScript con jQuery.



Saludos

Buscar este blog

dM BLOG