El formato del número de teléfono de EE. UU. es:
(XXX) XXX-XXXX Para cualquier cadena dada (solo dígitos) de longitud 0 < length <= 10 , quiero obtener una matriz de todos los fragmentos posibles que coincidan con el formato de número de teléfono de EE. UU.
Por ejemplo:
Input: "54" Output: ["(54", "54", "54)", "5) 4", "5-4"]Para entradas más largas, la salida será mucho más complicada, y creo que sería estúpido escribirlo a mano.
Lo que estoy tratando de hacer es resaltar el número de teléfono en un resultado de búsqueda mientras lo escribo en mi proyecto.
Estoy usando https://www.npmjs.com/package/react-highlight-words para lograrlo: este paquete puede tomar la matriz de searchWords para buscar en un texto específico. No puedo encontrar ningún paquete o función que me ayude a realizar esta tarea, ni soy fluido con expresiones regulares (ni siquiera estoy seguro de si ayudaría aquí)
Puede convertir su cadena de dígitos en una expresión regular que busca una serie de: un no dígito opcional ( \D? ) seguido del dígito de destino seguido de un no dígito opcional. Por ejemplo, "54" se convierte en la expresión regular \D?5\D?\D?4\D? .
Como esto:
function format(num, digits) { // Since we're using a template literal, we have to escape the backslash // in `\D` for the regex constructor to see it const rex = new RegExp([...digits].map(digit => `\\D?${digit}\\D?`).join(""), "g"); const result = num.replace(rex, m => `<span class="highlight">${m}</span>`); return result; }Eso parece hacer el truco:
const numbers = [ "(321) 456-7890", "(098) 765-4321", "(541) 123-3456", "(354) 123-3456", "(335) 423-3456", "(231) 541-1234", "(231) 254-1234", "(231) 225-4234", "(231) 223-5434", "(231) 223-3544", "(231) 223-3454", "(231) 543-3454", ]; const input = "54"; document.getElementById("output").innerHTML = `<div> ${numbers.map(num => "<div>" + format(num, input) + "</div>").join("")} </div>`; function format(num, digits) { const rex = new RegExp([...digits].map(digit => `\\D?${digit}\\D?`).join(""), "g"); const result = num.replace(rex, m => `<span class="highlight">${m}</span>`); return result; } .highlight { font-weight: bold; color: red; } <div id="output"></div>