Reputation: 3392
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!
Upvotes: 0
Views: 138
Reputation: 4981
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>
Upvotes: 1
Reputation: 177851
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>
Upvotes: 0
Reputation: 8833
<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>/))
Upvotes: 0
Reputation: 8732
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
Upvotes: 0