JavaScript - RegExp Expression

Brackets

Los corchetes son usados para buscar caracteres en un rango:

RegExp [abc] Expression

Hace una busqueda global para un caracter, en un string:

var str = "Is this all there is?";

var patt1 = /[h]/g;

El texto marcado muestra donde esta la expresion: Is this all there is?

Definición y uso

-La expresión [abc] se utiliza para encontrar cualquier carácter entre los corchetes.

-Los caracteres dentro de los corchetes pueden ser cualquier carácter o espacio de caracteres:

    [abcde ..] - Cualquier carácter entre los corchetes

    [AZ] - Cualquier carácter mayúscula de A a Z mayúscula

    [az] - Cualquier carácter minúscula de a la z minúscula

    [Az] - Cualquier carácter mayúscula de A a la z minúscula

RegExp [^abc] Expression

Hacemos una búsqueda global para los caracteres que no estén dentro de los corchetes [h]:

var str = "Is this all there is?";

var patt1 = /[^h]/g;

El texto marcado muestra donde esta la expresion: Is this all there is?

Mas ejemplos:

var str = "Do you know if this is all there is?";

var patt1 = /[^is]/gi; 

El texto marcado muestra donde esta la expresión:  Do you know if this is all there is?

var str = "Is this all there is?";

var patt1 = /[^a-h]/g;

El texto marcado muestra donde esta la expresión:  Is this all there is?

var str = "I SCREAM FOR ICE CREAM!";

var patt1 = /[^A-E]/g;

El texto marcado muestra donde esta la expresión:  I SCREAM FOR ICE CREAM!

var str = "I Scream For Ice Cream, is that OK?!";

var patt1 = /[^A-e]/g;

El texto marcado muestra donde esta la expresión:  I Scream For Ice Cream, is that OK?!

var str = "I Scream For Ice Cream, is that OK?!";

var patt1 = /[^a-s]/gi;

El texto marcado muestra donde esta la expresión:  I Scream For Ice Cream, is that OK?!

RegExp [0-9] Expression

Hacemos una busqueda global de los numeros 1,2,3,4 en el string:

var str = "123456789";

var patt1 = /[1-4]/g;

 El texto marcado muestra donde esta la expresion: 123456789

var str = "12121212";

var patt1 = /[1]/g;

El texto marcado muestra donde esta la expresion: 12121212

Definición y uso

-La expresión [0-9] se utiliza para encontrar cualquier dígito entre los corchetes.

-Los dígitos dentro de los corchetes pueden ser cualquier número o intervalo de números del 0 al 9.

-Tip: Utiliza la expresión [^ 0-9] para encontrar cualquier dígito que NO este detro del corchete.

RegExp [^0-9] Expression

Hacemos una busqueda global de los números que NO estén entre 1 a 4 en el string:

var str = "123456789";

var patt1 = /[^1-4]/g;

El texto marcado muestra donde esta la expresión:  123456789

Definición y uso

-La expresion [^0-9] se utiliza para encontrar cualquier dígito NO este dentro de los corchetes. 

-Los dígitos dentro de los corchetes pueden ser cualquier número o intervalo de números del 0 al 9.

var str = "12121212";

var patt1 = /[^1]/g;

El texto marcado muestra donde esta la expresión:  12121212

Hacemos una busqueda global de los numeros que no esten entre 5 a 8 dentro del string:

var str = "123456789";

var patt1 = /[^5-8]/g;

El texto marcado muestra donde esta la expresión:  123456789

RegExp (x|y) Expression

Hacemos una búsqueda global para encontrar alguna alternativa especificada(red|green):

var str = "re, green, red, green, gren, gr, blue, yellow";

var patt1 = /(red|green)/g;

El texto marcado muestra donde esta la expresión: re, green, red, green, gren, gr, blue, yellow

Definición y uso

-La (x | y) la expresión se utiliza para encontrar cualquiera de las alternativas especificadas.

-Las alternativas pueden ser de cualquier carácter.

var str = "01234567890123456789";

var patt1 = /(0|5|7)/g;

El texto marcado muestra donde esta la expresión: 01234567890123456789

JavaScript - RegExp Reference

El objeto RegExp 

Una expresión regular es un objeto que describe un patrón de caracteres.

Las expresiones regulares se utilizan para llevar a cabo de patrones y funciones de "buscar y reemplazar" en el texto.

Sintaxis

/pattern/modifiers;

Ejemplo:

var patt = /w3schools/i

/ W3schools / i   es una expresión regular.

w3schools   es un patrón (para ser utilizado en una búsqueda).

i   es un modificador (modifica la búsqueda para distinguir entre mayúsculas y minúsculas).

Modificadores

JavaScript - Expresiones Regulares

Las expresiones regulares son patrones utilizados para encontrar una determinada combinación de caracteres dentro de una cadena de texto. En JavaScript, las expresiones regulares también son objetos. Estos patrones son utilizados a través de los métodos exec y test de RegExp, así como los métodos match, replace, search y split de String. En este capítulo se describe el uso y funcionamiento de las expresiones regulares en JavaScript.

Creación de una expresión regular
Una expresión regular puede crearse de cualquiera de las siguientes dos maneras:

Utilizando una representación literal de la expresión:
var re = /ab+c/;
La representación literal compila la expresión regular una vez que el script ha terminado de cargar. Es recomendable utilizar esta representación cuando la expresión regular permanecerá sin cambios durante la ejecución del script, puesto que ofrece un mejor desempeño.

Constructor del objeto RegExp:
var re = new RegExp("ab+c");
El uso del constructor ofrece una compilación de la expresión regular en tiempo de ejecución. Su uso es recomendable en aquellos escenarios en que el patrón de la expresión regular pueda cambiar durante la ejecución del script, o bien, se desconoce el patrón, dado que se obtiene desde otra fuente, cuando es suministrado por el usuario, por ejemplo.

Escribiendo un patrón de expresión regular
Un patrón de expresión regular se compone de caracteres simples, como /abc/, o una combinación de caracteres simples y especiales, como /ab*c/ o /Chapter (\d+)\.\d*/. El segundo ejemplo incluye paréntesis, los cuales se emplean como un recurso de memoria. La coincidencia encontrada por esta parte del patrón es almacenada para posterior uso, como se describe en Using Parenthesized Substring Matches.

Utilizando patrones simples
Los patrones simples se construyen con caracteres para los que se desea una coincidencia exacta. Por ejemplo, el patrón /abc/ coincidirá sólo con esta secuencia exacta y orden de caracteres ('abc'). Tal expresión tendría resultados en las cadenas "Hi, do you know your abc's?" y "The latest airplane designs evolved from slabcraft." En ambos existe una coincidencia exacta con la subcadena 'abc'. No hay coincidencia en la cadena 'Grab crab' debido a que, a pesar de que contiene los caracteres 'a', 'b' y 'c', la sequencia 'abc' nunca aparece.

Utilizando caracteres especiales
Cuando la búsqueda de coincidencia requiere algo más que una coincidencia exacta, como por ejemplo el encontrar una o más 'b', o encontrar espacios en blanco, se incluyen en el patrón caracteres especiales. Por ejemplo, el patrón /ab*c/ coincidirá con cualquier secuencia de caracteres en la cual una 'a' preceda a cualquier cantidad de 'b' (cero o más) y sea inmediatamente seguida por una 'c'. En la cadena 'cbbabbbbcdebc,' el patrón coincidirá con la subcadena 'abbbbc'.

En la tabla que sigue se muestran los caracteres comodín usados para crear los patrones y su significado, junto a un pequeño ejmplo de su utilización.

La tabla que sigue describe los modificadores que pueden usarse con los caracteres que forman el patrón. Cada modificador actúa sobre el carácter o el paréntesis inmediatamente anterior.

Los siguientes son caracteres especiales o metacaracteres para indicar caracteres de texto no imprimibles, como puedan ser el fín de línea o un tabulador, o grupos predefinidos de caracteres (alfabéticos, numéricos, etc...)

JavaScript - Metodos Array

JavaScript Array concat() Method

Uniendo dos arrays:
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var children = hege.concat(stale);  //["Cecilie","Lone","Emil","Tobias","Linus"]

Syntax
array1.concat(array2, array3,..., arrayX)

Uniendo tres arrays:
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);  //["Cecilie","Lone","Emil","Tobias","Linus","Robin"]

JavaScript Array indexOf() Method

Busca el elemento Apple en el array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var a = fruits.indexOf("Apple");  //Resultado 2

Syntax
array.indexOf(item,start)

Busca el item "Apple"en el array, empezando desde la posición 4:
var fruits = ["Banana", "Orange", "Apple", "Mango", "Banana", "Orange", "Apple"];
var a = fruits.indexOf("Apple", 4);  //Resultado 6

JavaScript Array join() Method

Une los elementos de un array dentro de un string:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();  //"Banana,Orange,Apple,Mango"

Syntax
array.join(separator)

Usando diferentes separadores:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and ");  //"Banana and Orange and Apple and Mango"

JavaScript Array pop() Method

Borra el ultimo elemento de un array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();  //["Banana","Orange","Apple"]

Syntax
array.pop()

JavaScript Array push() Method

Agrega un nuevo item a un array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");  //["Banana","Orange","Apple","Mango","Kiwi"]

Syntax
array.push(item1, item2, ..., itemX)

Agrega mas de un elemento:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi", "Lemon", "Pineapple");  //["Banana","Orange","Apple","Mango","Kiwi","Lemon","Pineapple"]


JavaScript Array reverse() Method

Invierte el orden del array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.reverse();  //["Mango","Apple","Orange","Banana"]

Syntax
array.reverse()

JavaScript Array shift() Method

Remove the first item of an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();  //["Orange","Apple","Mango"]

Syntax

array.shift()

JavaScript Array unshift() Method

Agrega nuevos elementos al inicio del array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");  //["Lemon","Pineapple","Banana","Orange","Apple","Mango"]

Syntax
array.unshift(item1,item2, ..., itemX)

JavaScript Array slice() Method

Selecciona elementos de un array:
var fruits = ["Banana", "Orange", "Lemon","Apple", "Mango"];
var citrus = fruits.slice(1, 3);  //["Orange","Lemon"]

Syntax
array.slice(start,end)

JavaScript Array sort() Method

Ordena un array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();  //["Apple","Banana","Mango","Orange"]

Syntax
array.sort(compareFunction)

Valores del parametro        
compareFunction: Es una función opcional que define un orden de clasificación alternativo. La función debe devolver un valor negativo, cero o positivo, dependiendo de los argumentos, como:
           - function(a, b){return a-b}
Cuando el método sort () compara dos valores, envía los valores a la función de comparación, y ordena los valores de acuerdo al valor (cero, negativo, positivo) devuelto.

Ordenamos los números de un array de forma ascendente:
var points = [40, 100, 1, 5, 25, 10];
points.sort(function(a, b){return a-b});  //["1","5","10","25","40","100"]

JavaScript Array splice() Method

Agrega elementos en el array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");  //["Banana","Orange","Lemon","Kiwi","Apple","Mango"]

Syntax
array.splice(index,howmany,item1,.....,itemX)

En la posicion 2 agregamos un nuevo elemento y removemos 1 elemento:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 1, "Lemon", "Kiwi");  //["Banana","Orange","Lemon","Kiwi","Mango"]

En la posicion 2, removemos 2 elementos:
ar fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2);  //["Banana","Orange"]

JavaScript Array toString() Method

Convierte un array en una string:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var  x = fruits.toString();  //"Banana,Orange,Apple,Mango"

Syntax

array.toString()

JavaScript - Metodos String

JavaScript String charAt() Method

Retorna el primer caracter de una string:
var str = "HELLO WORLD";
var res = str.charAt(0);  // Resultado es H

JavaScript String charCodeAt() Method

Retorna el Unicode del primer carácter en el string(el valor Unicode para "H"):
var str = "HELLO WORLD";
var n = str.charCodeAt(0);  //Resultado es 72

JavaScript String concat() Method

Une X strings:
var str1 = "Hello ";
var str2 = "world!";
var str3 = " Have a nice day!";
var res = str1.concat(str2,str3);  //Resultado Hello world! Have a nice day!

JavaScript String indexOf() Method

Busca el string "welcome":
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("welcome");  //Resultado 13

Syntax
string.indexOf(searchvalue,start)

Encuentra la primera aparición de la letra "e" en un string, empezando a buscar en la posición 5:
var str = "Hello world, welcome to the universe.";
var n = str.indexOf("e", 5);  //Resultado 14

JavaScript String lastIndexOf() Method

Busca la ultima aparicion del string "planet":
var str = "Hello planet earth, you are a great planet.";
var n = str.lastIndexOf("planet");  // Resultado 36

Syntax
string.lastIndexOf(searchvalue,start)

Busca la ultima aparicion del string "planet", empezando desde la posicion 20:
var str = "Hello planet earth, you are a great planet.";
var n = str.lastIndexOf("planet", 20);  //Resultado 6

JavaScript String localeCompare() Method

Compara dos cadenas en la localización actual:
var str1 = "ab";
var str2 = "cd";
var n = str1.localeCompare(str2);  //Resultado -1

Syntax
string.localeCompare(compareString)

Detalles
Valor de retorno:
Un número, que indica si la cadena de referencia viene antes, después o es el mismo que el CompareString en orden de clasificación. Devuelve uno de tres valores:
        -1 Si la cadena de referencia se ordena antes de la CompareString
        0 si las dos cadenas son iguales
        1 si la cadena de referencia se ordena después de la CompareString

Compara dos cadenas en la localización actual:
var str1 = "cd";
var str2 = "ab";
var n = str1.localeCompare(str2);  //Resultado 1 str1 is sorted after str2

Compara dos cadenas iguales en la localización actual:
var str1 = "ab";
var str2 = "ab";
var n = str1.localeCompare(str2);  //Resultado 0 the two strings are equal

JavaScript String match() Method

Busca un string "ain":
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/g);  //Resultado ain, ain, ain

Syntax
string.match(regexp)

Realiza una busqueda global intensiva de "ain":
var str = "The rain in SPAIN stays mainly in the plain";
var res = str.match(/ain/gi);  //Resultado ain,AIN,ain,ain

JavaScript String replace() Method

Retorna un string donde "Microsoft" es remplazada con "W3Schools":
var str = "Visit Microsoft!";
var res = str.replace("Microsoft", "W3Schools");  //Resultado Visit W3Schools!

Syntax
string.replace(searchvalue,newvalue)

Realiza un reemplazo global:
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/g, "red");  //Resultado Mr Blue has a red house and a red car

Realiza un reemplazo global mas intensivo:
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue/gi, "red");  //

Usando una funcion que retorna el remplazo de texto:
var str = "Mr Blue has a blue house and a blue car";
var res = str.replace(/blue|house|car/gi, function myFunction(x){return x.toUpperCase();});
//Resultado Mr BLUE has a BLUE HOUSE and a BLUE CAR.

JavaScript String search() Method

Buscando "W3Schools":
var str = "Visit W3Schools!";
var n = str.search("W3Schools");  //Resultado 6

Realiza una busqueda en un caso mas sensitivo:
var str = "Mr. Blue has a blue house";
var n = str.search("blue");  //Resultado 15

Realiza una busqueda en un caso mas insensible:
var str = "Mr. Blue has a blue house";
var n = str.search(/blue/i);  //Resultado 4

JavaScript String slice() method

Extrae partes del string:
var str = "Hello world!";
var res = str.slice(1,5);  //Resultado ello

Syntax
string.slice(start,end)

Extrae la posición 3 hasta el final:
var str = "Hello world!";
var res = str.slice(3);  //Resultado lo world!

Extrae los caracteres desde la posición 3 hasta la posición 8:
var str = "Hello world!";
var res = str.slice(3, 8);  //Resultado lo wo

JavaScript String split() Method

Divide un string en un array:
var str = "How are you doing today?";
var res = str.split(" ");  //Resultado ["How","are","you","doing","today?"]

Syntax
string.split(separator,limit)

Omit the separator parameter:
var str = "How are you doing today?";
var res = str.split();  //Resultado ["How are you doing today?"]

Separa los caracteres incluyendo espacios en blanco:
var str = "How are you doing today?";
var res = str.split("");  //Resultado ["H","o","w"," " ,"a","r","e"," ","y","o","u"," ","d","o","i","n","g"," ","t","o","d","a","y","?"]

Usando el parametro limit:
var str = "How are you doing today?";
var res = str.split(" ",3);  //Resultado ["How","are","you"]

Usando una letra como separador:
var str = "How are you doing today?";
var res = str.split("o");  //Resultado ["H","w are y","u d","ing t","day?"]

JavaScript - Objeto String

Normalmente, las cadenas de JavaScript son valores primitivos, creados a partir de literales: var firstName = "Juan"

Pero las cadenas también pueden ser definidos como objetos con la palabra clave new: var firstName = new String ("Juan")

var x = "John";

var y = new String("John");

// typeof x retorna un string

// typeof y retorna un objet

Crear cadenas como objetos ralentiza la velocidad de ejecución  

Cuando se utiliza el operador de igualdad ==, los string se ven igual

var x = "John";             

var y = new String("John");

// (x == y) is true because x and y have equal values

Cuando se utiliza el operador de igualdad ===, los string no son iguales, porque el operador === espera la igualdad tanto en tipo y valor.

var x = "John";             

var y = new String("John");

// (x === y) is false because x and y have different types

Los objetos no se pueden comparar:

var x = new String("John");             

var y = new String("John");

// (x == y) is false because objects cannot be compared

Propiedades String

JavaScript - Tipos de datos

Resumen sobre tipos de datos en JavaScript.

“undefined” en Javascript

Undefined es un tipo de dato, al igual que lo son el Number, String, Boolean, Object o el Array. Javascript, al ser un lenguaje débilmente tipado, nos permite declarar variables sin especificar de qué tipo serán los valores que contenga. De esa forma, Javascript considerará a la variable de un tipo de dato u otro en función de su contenido, por ejemplo:

var number1 = 123     // Tipo Number
var number2 = "123" // Tipo String
var number3;

La variable “number3″ no tiene un valor asignado, ¿de qué tipo es? Dado que todas las variables han de tener siempre un tipo, en este caso Javascript considera la variable “number3″ de tipo undefined.

En resumen, en Javascript, todas aquellas variables que no han sido definidas (por lo tanto, no existen) o que han sido definidas sin asignárseles un valor, son siempre de tipo undefined.

“null” en Javascript

El valor null es en sí mismo un valor, pero un valor que indica la ausencia de contenido, el valor vacío. Si escribimos el siguiente código:

var number1 = null;

¿De qué tipo es la variable “number1″ ahora? Para Javascript, dado que a la variable number1 se le ha asignado el valor null, es una variable de tipo Object ahora mismo.

Resumiendo

Si lo que necesitamos es saber simplemente si una variable tiene el valor null o no ha sido definida, podemos utilizar el operador de negación:

var data;
if (!data) //true

Si necesitamos saber si una variable contiene realmente el valor null, hemos de utilizar el operador de identidad:

var data = null;
if (data === null) //true

Si necesitamos saber si una variable es de tipo undefined, para ello hemos de utilizar el operador typeof, el cual retorna en formato String, el nombre del tipo de dicha variable:

var data;
if (typeof(data) == "undefined") //true

Con esto ya tenemos un poco más claro cómo podemos comparar variables a las que no se les ha asignado un valor y variables con valor null. También hemos aprendido cuál es realmente la diferencia que Javascript hace entre undefined y null.