7 extensiones a las cadenas en Javascript que ahorran mucho código y se ven elegantes

admin

March 26, 2016

javascript

No Comment

Estas 7 funciones básicas de cadenas son fáciles de implementar como extensiones del objeto String, son muy utilizadas y el código resultante es mucho más legible, mantenible y elegante:

1 y 2: Encode y Decode Uri

A pesar de que las uso seguido, eso de añadir el sufijo “Component” a la función siempre se me olvida. Con esta simple extensión no batallas nada.

/**
 * Encodifica en formato uri la cadena
 * Uso:
 *  var str = "Esta es una cadena";
 *  str = str.encodeUri();
 *  console.log( str );
 *  // Outputs "Esta%20es%20una%20cadena"
 */
String.prototype.encodeUri = function () {
  return encodeURIComponent( this );
}; // end encodeUri

/**
 * Decodifica la cadena a partir del formato uri
 * Uso:
 *  var str = "Esta%20es%20una%20cadena";
 *  str = str.decodeUri();
 *  console.log( str );
 *  // Outputs "Esta es una cadena";
 */
String.prototype.decodeUri = function () {
  return decodeURIComponent( this );
}; // end decodeUri

3 y 4: EscapeRegEx y ReplaceAll

Por alguna extraña razón, cuando reemplazar una cadena por otra solamente se reemplaza la primer coincidencia. Esto es un problema, pero fácilmente se soluciona con estas dos funciones y agregando estas extensiones, utilizarlas es mucho más sencillo.

/**
 * Crea una cadena de expresión regular a partir de la cadena,
 * anteponiendo "\" a los caracteres especiales, "escapando"
 * la cadena
 * Uso:
 *  var str = "Hola!";
 *  str = str.escapeRegExp();
 *  console.log( str );
 *  // Outputs: "Hola\!"
 */
String.prototype.escapeRegExp = function () {
    return this.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}; // end function escapeRegExp

/**
 * Reemplaza todas las instancias de "find" por "replace"
 * en la cadena
 * Uso:
 *  str = "Hola me llamo $nombre, $nombre es mi nombre";
 *  str = str.replaceAll( "$nombre", "Luis" );
 *  console.log( str );
 *  // Outputs: "Hola me llamo Luis, Luis es mi nombre"
 */
String.prototype.replaceAll = function ( find, replace ) {
  return this.replace(new RegExp(find.escapeRegExp(), 'g'), replace);
}; // end function replaceAll

5, 6 y 7: Right, Left y Contains

Si tuviste a VB como tu primer lenguaje como yo, seguramente extrañas estas funciones. Pues implementarlas para todas las cadenas es bastante sencillo, ahorra teclazos y el resultado es muy intuitivo:

/**
 * Regresa "n" caracteres a la izquierda de la cadena
 * Uso:
 *  var str = "ABCDE";
 *  str = str.left(3);
 *  console.log( str );
 *  // Outputs: "ABC"
 */
String.prototype.left = function ( n ){
	if (n <= 0)
	    return "";
	else if (n > this.length)
	    return this;
	else
	    return this.substring(0,n);
}; // end function left

/**
 * Devuelve "n" caracteres a la derecha de la cadena
 * Uso:
 *  var str = "ABCDE";
 *  str = str.right(3);
 *  console.log( str );
 *  // Outputs: "CDE"
 */
String.prototype.right = function ( n ) {
    if (n <= 0)
       return "";
    else if (n > this.length)
       return this;
    else {
       var iLen = this.length;
       return this.substring(iLen, iLen - n);
    }
}; // end function right

/**
 * Devuelve verdadero si la cadena contiene a "str"
 * Uso:
 *  var str = "Hola mundo!";
 *  var lookFor = "mundo";
 *  var inString = str.contrains(lookFor);
 *  console.log(inString);
 *  // Outputs: true
 */
String.prototype.contains = function ( str ) {
  return (
    this.indexOf( str ) > -1
  );
}; // end function contains

Corriendo este script al principio de tu código te permitirá utilizar estas extensiones, te facilitará la vida y tendrás un codigo más limpio y elegante. Happy Coding! 🙂

Related Posts

Safe Type Classes con Javascript Puro

Hoy en día tenemos TypeScript, un superset de Javascript type safe de Microsoft, y Dart, otro superset type safe pero de Google, y estan muy bien, pero digamos que no tienes el tiempo ni/o la voluntad de aprender otro lenguaje o superset de uno que ya sabes, y quieres implementar algo de type safety en […]

Read More

Agregar y quitar clases CSS a cualquier elemento DOM en Javascript

admin

March 23, 2016

javascript

No Comment

El siguiente script modifica el prototipo de HTMLElement para implementar la funcionalidad de agregar y quitar clases CSS fácilmente a cualquier elemento del DOM en javascript: // Función para buscar la clase en el elemento HTMLElement.prototype.hasClass = function ( className ) { var rgx = new RegExp('(\\s|^)' + className + '(\\s|$)'); var match = this.className.match( […]

Read More

Leave a Reply

Your email address will not be published. Required fields are marked *

Busca en el blog aqui

Herramientas Útiles

Suscribete al blog

Recibe en tu correo las últimas publicaciones

Publicidad

Sígueme en Twitter