Simple Javascript Find and Replace

Question

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.

That etc. is very important here, you need to list the different variations. A regex or other pattern matching is necessary, because you have multiple versions to replace,. — Nick Craver
– Nick Craver, Commented Nov 1, 2010 at 19:56
@Nick Craver - Essentially it would be any common method for formatting phone numbers --- 555-666-7777, (555) 666-7777, 555.666.7777, (555)666-7777 — Batfan
– Batfan, Commented Nov 1, 2010 at 19:59
Yeah regex seems like the best option. If you are super daring depending on what web platform you are using you could handle the output before it is pushed out from the server. On the server side versus client side read through what is about to be outputted and switch the numbers server side. Using some HTTP handlers, or rack or something. — Ryan Doom
– Ryan Doom, Commented Nov 1, 2010 at 20:01

orangepips · Accepted Answer · 2010-11-02 00:33:37Z

1

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>

edited Nov 2, 2010 at 0:33

answered Nov 1, 2010 at 20:25

orangepips

10k6 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Batfan Over a year ago

Actually no. Thanks for the suggestion though.

Batfan Over a year ago

Yeah, I had checked out that site prior to posting my question. I'm really a novice when it comes to regex. Any examples you could post?

Batfan Over a year ago

Okay, I've been playing around with that locally but, its only giving me an alert box with the replaced number. I've been messing with it and trying to get it to skip the alert and just replace any instances it finds.

orangepips Over a year ago

The most recent update above gives you the answer, please mark as such, or explain why not.

Batfan Over a year ago

That works exactly as expected. Thanks so much for your help.

Collectives™ on Stack Overflow

Simple Javascript Find and Replace

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related