Simple Javascript Find and Replace

Question 1

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.

Question 2

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,.

Question 3

@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

Question 4

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.

Question 5

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>

Question 6

Actually no. Thanks for the suggestion though.

Question 7

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?

Question 8

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.

Question 9

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

Question 10

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

orangepips 10k6 gold badges38 silver badges60 bronze badges · Accepted Answer · 2010-11-01 20:25:19Z

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>

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?
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.
The most recent update above gives you the answer, please mark as such, or explain why not.
That works exactly as expected. Thanks so much for your help.

CollectivesTM on Stack Overflow

Simple Javascript Find and Replace

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

CollectivesTM on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related