CSS String Length

Question

and thanks first of all for looking at my post.

My question today is about CSS. I have a script which connects to a database and creates an XML stream. Within this stream is a telephone number string which is formatted as 8005551212

This XML stream is exploded and parsed into my final page.

However on my final page I need to display this string as (800)555-1212

Does CSS have the capability to convert this string? I have been reading up on `word-wrap: break-word but I may be going down the wrong path....

Thanks Again, --Matt

You can't in CSS. If you can't change the thing that is exploding XML you can postprocess in JavaScript — Daniel
– Daniel, Commented Jul 30, 2011 at 18:20

Spudley · Accepted Answer · 2011-07-30 20:49:10Z

5

Use Javascript for this, not CSS.

Here's a very simple one-line JS regex function to do the job for you:

var formatted_phone = plain_phone.replace(/^(\d{3})(\d{3})(\d{4})$/,"($1)$2-$3");

(note, the line above assumes that the phone number is already known to be in the correct format; it doesn't do any validation)

Hope that helps.

answered Jul 30, 2011 at 20:49

Spudley

169k39 gold badges240 silver badges309 bronze badges

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

Comments

Jason Gennaro · Accepted Answer · 2011-07-30 19:41:44Z

4

You can do it with javascript like this

var n = '8005551212';
var n1 = n.substring(0,3);
var n2 = n.substring(3,6);
var n3 = n.substring(6,11);

document.write("(" + n1 + ")" + n2 + "-" +n3);

http://jsfiddle.net/jasongennaro/N5Gsu/

Basically, your chopping the string into several pieces and then adding them together again with the new bits you want

If you need to do it for several numbers, you could use a function.

var n = ['8005551212','8005551213','8005551214'];

function formatNumbers(){
    for(var i=0; i<n.length; i++){
        var n1 = n[i].substring(0,3);
        var n2 = n[i].substring(3,6);
        var n3 = n[i].substring(6,11);
        document.write("(" + n1 + ")" + n2 + "-" + n3 + "<br />");
    }
}

formatNumbers(n);

http://jsfiddle.net/jasongennaro/N5Gsu/1/

To build on the comment from @Dennis, switched out document.write for .innerHTML

document.getElementById("a").innerHTML += 
  "(" + n1 + ")" + n2 + "-" + n3 + "<br />";

http://jsfiddle.net/jasongennaro/N5Gsu/2/

edited Jul 30, 2011 at 19:41

answered Jul 30, 2011 at 18:37

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

3 Comments

Dennis Over a year ago

Good answer, but you probably want document.getElementById("foo").innerHTML = instead of document.write

Jason Gennaro Over a year ago

@Dennis. Thanks. I was doing that for the fiddle, but your are correct. Answer edited.

Spudley Over a year ago

much easier to write a one line regex replace rather than manually chopping the string into bits. :-)

Adriano Carneiro · Accepted Answer · 2011-07-31 19:21:49Z

0

CSS cannot achieve this, note the CSS should be used for styling and not for content managing and behaviour.

instead, use JavaScript to achieve this: http://jsfiddle.net/Ke6Ns/

function formatPhone(phone) { 
  return "("+phone.substring(0,3)+")"+phone.substring(3,6)+"-"+phone.substring(6,11); 
}

edited Jul 31, 2011 at 19:21

Adriano Carneiro

58.8k12 gold badges94 silver badges123 bronze badges

answered Jul 30, 2011 at 21:08

Madara's Ghost

176k52 gold badges274 silver badges314 bronze badges

Collectives™ on Stack Overflow

CSS String Length

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related