The US phone number format is:

(XXX) XXX-XXXX

For any given string (only digits) of length 0 < length <= 10 I want to get array of all possible chunks matching US phone number format.

For example:

Input: "54" 
Output: ["(54", "54", "54)", "5) 4", "5-4"]

For longer Input the Output is going to be much more complicated, and I think it would be stupid to type it by hand.

What I'm trying to do is to highlight phone number in a search result as I type it in my project.

I am using the https://www.npmjs.com/package/react-highlight-words to achieve that - this package can take the array of searchWords to look for in specific text. I can't find any package or function to help me accomplish this task, neither I am fluent with regex (I'm not even sure whether it would help here)

CodePudding user response：

You can convert your digits string into a regular expression that look for a series of: an optional non-digit (\D?) followed by the target digit followed by an optional non-digit. For instance, "54" becomes the regular expression \D?5\D?\D?4\D?.

Like this:

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;
}

That seems to do the trick:

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>