Extracting data using regular expressions

Question

Given the following string, how would I extract the string between the quotes that follows data-selected (i.e. THIS-DATA). I would like it to work regardless of whether single or double quotes are used, or whether there is any white-space before or after the equal sign. Thank you

<td><img alt="abc" src="lib/templates/administrator/images/star.png" data-selected="THIS_DATA" title="None" class="vtip"></td>

[You can't parse HTML with regex](http://stackoverflow.com/a/1732454/538551) — beatgammit, Nov 24 '12 at 20:07
@tjameson. I thought you could search until you found a given pattern (i.e. data-selected), then gobble up until a next pattern was found. — user1032531, Nov 24 '12 at 20:10
I read that post earlier and thought it was hilarious. That's all. — beatgammit, Nov 24 '12 at 20:26
@user1032531 so you're getting a string that starts with a td tag...quite unusual! — Christophe, Nov 24 '12 at 20:39
is this really a javascript question? You woulndn't use a regex to parse data attributes in js. — chovy, Nov 25 '12 at 06:42

chovy · Answer 1 · 2012-11-25T06:46:05.343

1

Can you use jQuery? Not sure why you need to use a regex.

var $el = $(".vtip");
var data = $el.attr('data-selected');

or native javascript:

var el = document.querySelector(".vtip");
var data = el.getAttribute('data-selected');

or native javascript with dataset:

var el = document.querySelector(".vtip");
var data = el.dataset.selected;

More info using dataset: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

edited Nov 25 '12 at 06:46

answered Nov 24 '12 at 19:54

chovy

72,281
52
227
295

Thanks Chovy. Creative solution! Unfortunately, I am unable to use jQuery or similar approach, but just needed a regex. If the desire for single quotes or whitespace prevents this, I can eliminate these requirements. – user1032531 Nov 24 '12 at 20:01
I am creating a jQuery plugin. When configuring it, user can specify parsing function on certain items. I am looking for a generic approach to parse the data. – user1032531 Nov 25 '12 at 14:10

score 1 · Accepted Answer · answered Nov 24 '12 at 20:11

1

Simple regex, assuming THIS_DATA doesn't contain quotes:

var reg = /data-selected\s*=\s*["']([^"']*)["']/;

To use:

function extractData(yourString) {
    var match = str.match(yourString);
    return match ? match[1] : "";
}

Edit:

Or even simpler:

var data = str.replace(/.*data-selected\s*=\s*["']([^"']*)["'].*/, "$1");

answered Nov 24 '12 at 20:11

beatgammit

19,817
19
86
129

Thanks tjameson. Thanks, let me test it out. I really need to better learn regex! – user1032531 Nov 24 '12 at 20:12
`$1` is the first parenthesized part of the regex (the part we're after). I just made sure the regex matched the entire line (note the `.*` at the beginning and end) so the replace would just extract the part you want. `["']` matches a single or double quote, `[^"']` matches everything else. Happy regexing! – beatgammit Nov 24 '12 at 20:25
Thanks again. I am sure this will work and will select it as the answer, but it will probably first take me an hour to get it working! – user1032531 Nov 24 '12 at 20:28
Use the jQuery example then. Still don't understand why you would ever use regex to parse html, when there are already both jQuery and native solutions that are bulletproof. – chovy Nov 25 '12 at 17:59

dmi3y · Answer 3 · 2012-11-24T20:29:59.060

You may parse string as a dom

var xmlStr = '<td><img alt="abc" src="lib/templates/administrator/images/star.png" data-selected="THIS_DATA" title="None" class="vtip"></td>';
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlStr, "text/xml");

var path = 'img/@data-selected';

var nodes = xmlDoc.evaluate(path, xmlDoc, null, XPathResult.ANY_TYPE, null);


var result = nodes.iterateNext();
var data-selected  = result.textContent;

Extracting data using regular expressions

3 Answers3