Parse string in javascript using regular expressions

Question

I have html fragment on my page and it looks like this:

...
    <address>
       6231 Leesburg Pike Ste 100A<br>
       Falls Church, VA 22041-2102
    </address>
...

How can I parse this string using jQuery to get data below:

1. Address: 6231 Leesburg Pike Ste 100A
2. City: Falls Church
3. State: VA
4. ZIP: 22041

Thanks!

Strip all the tags out first (use regex or not), then parse the address. — user557597
– user557597, Commented May 8, 2017 at 20:28
Be more clear about what your string is. Your snippet includes some html... and parsing html with regex is incorrect. — user400654
– user400654, Commented May 8, 2017 at 20:44

degant · Accepted Answer · 2017-05-09 08:00:01Z

1

Regex:

(.*)\n(.*?),\s([A-Z]{2})\s(\d{5})

Javascript:

var str = $("address").text()
var extract = str.match(/(.*)\n(.*?),\s([A-Z]{2})\s(\d{5})/);

var address = extract[1];
var city = extract[2];
var state = extract[3];
var zip = extract[4];

console.log(address) // 6231 Leesburg Pike Ste 100A
console.log(city)    // Falls Church
console.log(state)   // VA
console.log(zip)     // 22041

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<address>
6231 Leesburg Pike Ste 100A<br>
Falls Church, VA 22041-2102
</address>

Jsfiddle

edited May 9, 2017 at 8:00

answered May 8, 2017 at 20:39

degant

4,9711 gold badge19 silver badges29 bronze badges

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

3 Comments

user400654 Over a year ago

@Naramsim jquery doesn't have any methods that would assist with this task.

mplungjan Over a year ago

Please click the <> snippet editor and copy the fiddle here

degant Over a year ago

Thanks @mplungjan, wasn't aware how to get that. Updated!

Naramsim · Accepted Answer · 2017-05-08 20:41:23Z

0

    console.log(`<address>
           6231 Leesburg Pike Ste 100A<br>
           Falls Church, VA 22041-2102
        </address>`.match(/(\d+.*)<br>\n\t?(.*), (\w+) ([\d-]+)/))

No jQuery needed

edited May 8, 2017 at 20:41

answered May 8, 2017 at 20:29

Naramsim

8,9006 gold badges38 silver badges44 bronze badges

3 Comments

mplungjan Over a year ago

A lot of unnecessary spaces

Naramsim Over a year ago

use .trim() please

mplungjan Over a year ago

I did use trim

Tezra · Accepted Answer · 2017-05-08 20:57:48Z

0

<address>[^\d]*(\d{1,4}[^<,]*)(?:<br\/?>|,)\s*([^,]*),\s*([A-Z]{2})\s*(\d{3,5})[^<]*<\/address>

Breakdown

<address> = start anchor
[^\d]* = eat all non digits
(\d{1,4}[^<,]*) Capture address
(?:<br\/?>|,)\s* eat to a <br> or comma
([^,]*) = Capture city
([A-Z]{2}) = capture state code
(\d{3,5}) = capture zip
[^<]* = eat rest too anchor
<\/address> = end anchor

var str = "<address>\
   6231 Leesburg Pike Ste 100A<br>\
   Falls Church, VA 22041-2102\
</address>";
console.log(str.match(/<address>[^\d]*(\d{1,4}[^<,]*)(?:<br\/?>|,)\s*([^,]*),\s*([A-Z]{2})\s*(\d{3,5})[^<]*<\/address>/))

edited May 8, 2017 at 20:57

answered May 8, 2017 at 20:33

Tezra

8,8734 gold badges37 silver badges72 bronze badges

5 Comments

mplungjan Over a year ago

I find this unreadable and nearly impossible to modify if something changes

user400654 Over a year ago

I was thinking that about all of the answers.

Tezra Over a year ago

@mplungjan ... that is regex for you, the more readable it is, the less reliable it is. But the groups are all small though so if you know regex, you can just read left to right. (and that is why I gave a breakdown of each step)

degant Over a year ago

'the more readable it is, the less reliable it is' - That is so not true!

Tezra Over a year ago

@degant Regex is about explicitly stating what you do AND don't want. The less assumptions you can make about your input, the more you need to say to properly separate ALL the good and bad cases. I just mean to say regex complexity grows exponentially with problem complexity. (The only time regex is readable to non-regex lovers is when there are almost no variable conditions)

mplungjan · Accepted Answer · 2017-05-09 04:28:23Z

Most pragmatic, assuming no other commas in the state/zip - much easier to read and more maintainable than a oneliner regexp

jQuery is only used to get and set the HTML - innerHTML can be used to not need jQuery at all

$(function() {
  var addr = $("address").html(),
    parts1 = addr.replace(/\s+/g, " ").split(/<br>/i),
    parts2 = parts1[1].split(","),
    parts3 = parts2[1].trim().split(" "),

    address = parts1[0].trim(),
    city = parts2[0].trim(),
    state = parts3[0].trim(),
    zip = parts3[1].trim(); // spirit on - if you need first part only 
  $("ol").after("<ol><li>Address: "+address+
     "</li><li>City: "+city+
     "</li><li>State: "+state+
     "</li><li>Zip: "+zip+"</li>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<address>
       6231 Leesburg Pike Ste 100A<br>
       Falls Church, VA 22041-2102
    </address>

<ol>
  <li>Address: 6231 Leesburg Pike Ste 100A</li>
  <li>City: Falls Church</li>
  <li>State: VA</li>
  <li>ZIP: 22041-2102</li>
</ol>

Collectives™ on Stack Overflow

Parse string in javascript using regular expressions

4 Answers 4

3 Comments

3 Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related