Axios + (Async - Await)

const $axiosAsync = document.getElementById("axios-async"),
  $fragment = document.createDocumentFragment();

async function getData() {
  try {
    let res = await axios.get("https://jsonplaceholder.typicode.com/users"),
      json = await res.data;

    console.log(res, json);

    json.forEach((el) => {
      const $li = document.createElement("li");
      $li.innerHTML = `${el.name} -- ${el.email} -- ${el.phone}`;
      $fragment.appendChild($li);
    });

    $axiosAsync.appendChild($fragment);
  } catch (err) {
    console.log(err.response);
    let message = err.response.statusText || "Ocurrió un error";
    $axiosAsync.innerHTML = `Error ${err.response.status}: ${message}`;
  } finally {
    console.log("Esto se ejecutará independientemente del try... catch");
  }
}

getData();

BOM DOMContentLoaded

Mas rapido que en el evento "load" y $(document).on('ready')

document.addEventListener("DOMContentLoaded", e => {

    console.log(e);

});

addEventListener

Optimiza los clicks apuntando el evento directamente al document

document.addEventListener('click', e => {
    if(e.target.matches("#id")){
       console.log(e.target);
    }
});

Volvimos

var volvimos = `Volvimos`;

https://tohtml.com/

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...)