0

I'd like to take an email address and convert it to a valid DOM id so that it can be used to dynamically build an HTML element with jQuery.

For example:

  • Given: some.user@example.com
  • Returns: some-user-at-example-com
  • For: $('<div />').attr('id, 'some-user-at-example-com');

Somewhat like the Rails parameterize method. What's a clean, simple way to do this?

Community
  • 1
  • 1
klenwell
  • 6,978
  • 4
  • 45
  • 84
  • 3
    Why storing an email as ID value? Why don't you use `data-*` attributes? – Ram Apr 03 '13 at 02:38
  • Why not use an array index or key and store your data however you want into a JavaScript var? – Brad Apr 03 '13 at 02:40
  • As to why I want an email as an ID, I'm building a small dynamic interface with jQuery and it provides a convenient handle for selecting various children of the parent element to which it will be applied. I'm not promoting this as a general practice, but it serves my purposes here. – klenwell Apr 03 '13 at 03:04
  • Put the email address in an object and assign a value, unique id to the element. Then use one to lookup the other as required. Does not require any munging of the email address or invalid characters in the ID. – RobG Apr 03 '13 at 03:06

2 Answers2

2

If you want that output for that input exactly, you could use a regular expression or three:

var id = email.replace(/@/g, ' at ').replace(/[^a-z0-9-]+/gi, '-')
              .replace(/^-|-$/g, '');

First, we replace the at signs with "at" (with leading and trailing spaces). Then we replace any sequence of non-alphanumeric characters with a dash.

Take note, however, that multiple email addresses can become the same ID. For example, john.doe@example.com and john-doe@example.com both become john-doe-at-example-com. You should not use these identifiers for IDs, as they are not unique.

icktoofay
  • 126,289
  • 21
  • 250
  • 231
  • Collisions like that aren't a concern. This almost works as hoped, though I tried it on one of the "valid email addresses" provided by @elclanrs, `"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com`, and it produced: `-very-VERY-very-at-very-unusual-at-strange-example-com`. – klenwell Apr 03 '13 at 02:58
  • @klenwell: Oh, I forgot about that corner case. Fixed. – icktoofay Apr 03 '13 at 03:01
1

Regex and replace should do, but you really should consider if this approach is worth doing given that there are sooo many potential valid email addresses.

'some.user@example.com'.replace(/[.@]/g ,'-')

From the Wikipedia on "valid email addresses":

niceandsimple@example.com
very.common@example.com
a.little.lengthy.but.fine@dept.example.com
disposable.style.email.with+symbol@example.com
user@[IPv6:2001:db8:1ff::a0b:dbd0]
"much.more unusual"@example.com
"very.unusual.@.unusual.com"@example.com
"very.(),:;<>[]\".VERY.\"very@\\ \"very\".unusual"@strange.example.com
postbox@com (top-level domains are valid hostnames)
admin@mailserver1 (local domain name with no TLD)
!#$%&'*+-/=?^_`{}|~@example.org
"()<>[]:,;@\\\"!#$%&'*+-/=?^_`{}| ~.a"@example.org
" "@example.org (space between the quotes)
elclanrs
  • 92,861
  • 21
  • 134
  • 171