360 Front-end Star Project-Creación y uso de expresiones regulares (Wang Feng)

1. La creación y el uso de expresiones regulares.

1.1 Crear expresiones regulares

• Use literales de expresión regular para
  const reg = /[a-z]\d+[a-z]/i;
/ /incluir el contenido de expresiones regulares, [a-z]letras, \dnúmeros, repita una o más veces +delante de ( \d), iindique modificadores e ignore mayúsculas y minúsculas

  • Ventajas: simple y conveniente y no es necesario considerar un escape secundario
  • Desventajas: el subcontenido no se puede reutilizar, la regularidad demasiado larga conduce a una mala legibilidad

• Usar el constructor RegExp

  const alphabet = '[a-z]';
  const reg = new RegExp(`${alphabet}\\d+${alphabet}`, 'i');
  

  • Ventajas: el subcontenido se puede reutilizar y la legibilidad se puede mejorar controlando la granularidad del subcontenido
  • Desventajas: el problema del escape secundario es muy fácil de causar errores

    const reg = new RegExp(`\d+`);
    reg.test('1'); // false
    reg.test('ddd'); // true
    

1.2 Usar expresiones regulares

• RegExp.prototype.test ()

  const reg = /[a-z]\d+[a-z]/i;
  reg.test('a1a'); // true
  reg.test('1a1'); // false
  reg.test(Symbol('a1a')); // TypeError
  

  Entrada: se requiere la cadena de entrada. Si la entrada no es un tipo de cadena, intentará convertir el tipo. Si la conversión falla, arrojará una
  salida TypeError : verdadero o falso, lo que indica que la coincidencia es exitosa o fallida

• RegExp.prototype.source (contenido) y RegExp.prototype.flags (modificadores y ordénelos en orden ascendente)

  const reg = /[a-z]\d+[a-z]/ig;
  reg.source; // "[a-z]\d+[a-z]"
  reg.flags; // "gi"
  

• RegExp.prototype.exec () 和 String.prototype.match ()

  const reg = /[a-z]\d+[a-z]/i;
  reg.exec('a1a'); // ["a1a", index: 0, input: "a1a", groups: undefined]
  reg.exec('1a1'); // null
  'a1a'.match(reg); // ["a1a", index: 0, input: "a1a", groups: undefined]
  '1a1'.match(reg); // null
  

  Entrada: RegExp.prototype.exec requiere la entrada de una cadena e intentará convertir cuando encuentre un tipo que no sea de cadena;
  String.prototype.match requiere la entrada de una expresión regular; si encuentra otros tipos, primero intentará convertir a una cadena y luego usará la cadena fuente crea expresiones regulares

  Salida: coincidencia exitosa, retorno resultado de coincidencia, falla de coincidencia, retorno nulo

Dado que el formato de datos devuelto por String.prototype.match no es fijo, se recomienda usar RegExp.prototype.exec en la mayoría de los casos

• RegExp.prototype.lastIndex
  Nota: lastIndex no se restablecerá por sí solo, solo se restablecerá a 0 cuando falle la última coincidencia, por lo que cuando necesite usar la misma expresión regular repetidamente, haga coincidir los nuevos caracteres cada vez Restablecer lastIndex antes de la cadena!
• String.prototype.replace () 、 String.prototype.search () 、 String.prototype.split ()

2. Tres escenarios de aplicación

2.1 Escenario 1: regular y numérico

Proceso de juicio numérico:

• /[0-9]+/ : Coincidencia incompleta (siempre que contenga números)
• /^\d+$/: No puede coincidir valores firmados y decimales
• /^[+-]?\d+(\.\d+)?$/: No puede coincidir decimales sin parte integral (.123)
• /^[+-]?(?:\d*\.)?\d+$/: No puede coincidir el valor sin parte decimal (2.) y notación científica (-2.e + 4)

Completa regularidad numérica:

• /^[+-]?(?:\d+\.?|\d*\.\d+)(?: e[+-]?\d+)?$/i

Use la regularización para procesar valores:

• Análisis numérico

  const reg = const reg = /[+-]?(?:\d*\.)?\d+(?:e[+-]?\d+)?(?=px|\s|$)/gi;
  
  function execNumberList(str) {
      reg.lastIndex = 0;
      let exec = reg.exec(str);
      const result = [];
      while (exec) {
          result.push(parseFloat(exec[0]));
          exec = reg.exec(str);
      }
      return result;
  }
  
  console.log(execNumberList('1.0px .2px -3px +4e1px')); // [1, 0.2, -3, 40]
  console.log(execNumberList('+1.0px -0.2px 3e-1px')); // [1, -0.2, 0.3]
  console.log(execNumberList('1px 0')); // [1, 0]
  console.log(execNumberList('-1e+1px')); // [-10]
  

• Valor en formato de moneda: es decir, se agrega una coma a cada milésima

  const reg = /(\d)(?=(\d{3})+(,|$))/g;
  function formatCurrency(str) {
     return str.replace(reg, '$1,');
  }
  
  console.log(formatCurrency('1')); // 1
  console.log(formatCurrency('123')); // 123
  console.log(formatCurrency('12345678')); // 12,345,678
  

2.2 Escena dos: regularidad y color

Cuántas formas de representar colores:

• Notación hexadecimal

  color: #rrggbb;
  color: #rgb;
  color: #rrggbbaa;
  color: #rgba;
  

  const hex = '[0-9a-fA-F]';
  const reg = new RegExp(`^(?:#${hex}{6}|#${hex}{8}|#${hex}{3,4})$`);
  

• notación rgb / rgba

  color: rgb(r, g, b);
  color: rgb(r%, g%, b%);
  color: rgba(r, g, b, a);
  color: rgba(r%, g%, b%, a);
  color: rgba(r, g, b, a%);
  color: rgba(r%, g%, b%, a%);
  

  const num = '[+-]?(?:\\d*\\.)?\\d+(?:e[+-]?\\d+)?';
  const comma = '\\s*,\\s*';
  const reg = new RegExp(`rgba?\\(\\s*${num}(%?)(?:${comma}${num}\\1){2}(?:${comma}${num}%?)?\\s*\\)`);
  

• Otros

  /* hsl & hsla */
  color: hsl(h, s%, l%);
  color: hsla(h, s%, l%, a);
  color: hsla(h, s%, l%, a%);
  
  /* keywords */
  color: red;
  color: blue;
  /* …… */
  

Use colores de procesamiento regulares:

• Optimización de color hexadecimal

  const hex = '[0-9a-z]';
  const hexReg = new RegExp(`^#(?<r>${hex})\\k<r>(?<g>${hex})\\k<g>(?<b>${hex})\\k<b>(?<a>${hex}?)\\k<a>$`, 'i');
  function shortenColor(str) {
      return str.replace(hexReg, '#$<r>$<g>$<b>$<a>');
  }
  
  console.log(shortenColor('#336600')); // '#360'
  console.log(shortenColor('#19b955')); // '#19b955'
  console.log(shortenColor('#33660000')); // '#3600'
  

2.3 Escenario 3: Regular y URL

Analiza la URL:

const protocol = '(?<protocol>https?:)';
const host = '(?<host>(?<hostname>[^/#?:]+)(?::(?<port>\\d+))?)';
const path = '(?<pathname>(?:\\/[^/#?]+)*\\/?)';
const search = '(?<search>(?:\\?[^#]*)?)';
const hash = '(?<hash>(?:#.*)?)';
const reg = new RegExp(`^${protocol}\/\/${host}${path}${search}${hash}$`);
function execURL(url) {
    const result = reg.exec(url);
    if (result) {
        result.groups.port = result.groups.port || '';
        return result.groups;
    }
    return {
        protocol: '', host: '', hostname: '', port: '',
        pathname: '', search: '', hash: '',
    };
}

console.log(execURL('https://www.360.cn'));
console.log(execURL('http://localhost:8080/?#'));
console.log(execURL('https://image.so.com/view?q=360&src=srp#id=9e17bd&sn=0'));
console.log(execURL('this is not a url'));

console.log(execURL('https://www.360.cn'));
{
  protocol: 'http:',
  host: 'www.360.cn',
  hostname: 'www.360.cn',
  port: '',
  pathname: '',
  search: '',
  hash: ''
}
console.log(execURL('http://localhost:8080/?#'));
{
  protocol: 'http:',
  host: 'localhost:8080',
  hostname: 'localhost',
  port: '8080',
  pathname: '/',
  search: '?',
  hash: '#'
}
console.log(execURL('https://image.so.com/view?q=360&src=srp#id=9e17bd&sn=0'));
{
  protocol: 'https:',
  host: 'image.so.com',
  hostname: 'image.so.com',
  port: '',
  pathname: '/view',
  search: '?q=360&src=srp',
  hash: '#id=9e17bd&sn=0'
}
console.log(execURL('this is not a url'));
{
  protocol: '',
  host: '',
  hostname: '',
  port: '',
  pathname: '',
  search: '',
  hash: ''
}

Use regular para analizar la búsqueda y el hash:

function execUrlParams(str) {
    str = str.replace(/^[#?&]/, '');
    const result = {};
    if (!str) {
        return result;
    }
    const reg = /(?:^|&)([^&=]*)=?([^&]*?)(?=&|$)/y;
    let exec = reg.exec(str);
    while (exec) {
        result[exec[1]] = exec[2];
        exec = reg.exec(str);
    }
    return result;
}

console.log(execUrlParams('#')); // { }
console.log(execUrlParams('##')); // { '#': '' }
console.log(execUrlParams('?q=360&src=srp')); // { q: '360', src: 'srp' }
console.log(execUrlParams('test=a=b=c&&==&a=')); // { test: 'a=b=c', '': '=', a: '' }

3. Resumen

¿Cómo usar expresiones regulares?

• Demanda clara
• Considere integral
• Pruebas repetidas