Home/ Questions/Q 3305422
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T21:10:01+00:00

I am working on a project where I need to replace any phone number

  • 0

I am working on a project where I need to replace any phone number on a site with a number formatted like this:

<span id="special-id">555-666-7777</span>

Using regex isn’t really necessary as I know the value I need to replace. Also, some of the numbers may be formatted differently (with parentheses or decimals).

I’m fairly certain I could figure out how to do this with Jquery but, for this project, I need to use regular Javascript.

In a nutshell, I’d like to define 1 or more versions of the number ( 555-666-7777, (555) 666-7777, etc ) and have them replaced with my hyphenated version of the number, in a SPAN tag, with an ID.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Are you updating a bunch files (e.g. .html) in a directory structure? If so, grep would be your friend here, especially if you can identify all the phone number permutations. Then use a regex with grep to find and replace across all of them. Here’s a partial solution as such:

    grep -l -R –perl-regexp “\b((\d{3})\s*|\d{3}-)\d{3}-\d{4}\b” * > output.txt

    Stolen from: http://sites.google.com/site/steveyegge2/five-essential-phone-screen-questions

    Update for JavaScript

    Use Regular Expression Backreferences in JavaScript. Basically you define a regex that has “sub matches” inside of it, where the replacement value refers back to those. In your case sub match the digits and then replace with back reference to those digits plus your separator(s) and surround with <span/> tags.

    Example

    Notice the “g” flag at the end of the regular expression to make it global.

    <html>

<head>

<script type="text/javascript">
function cleanPhoneNumbers() {
    document.body.innerHTML = 
        document.body.innerHTML.replace(
            /\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})/g, 
            "<span>$1-$2-$3</span>"
        );
}
</script>

</head>

<body onload="cleanPhoneNumbers();">
<div>There's a bunch of text here and some other <b>tags</b> and
stuff <i>to mix it up.</i></div>
<p>Perhaps <i>dial</i> (555) 666-7777</p>
</body>

</html>
    • 0