Need regex to extrude class values

Question

I have this kind of code

<div class="test"><a href="../toto"><i class="test toto">toto</i></a></div>
<div class="test"><a href="../titi"><i class="test titi">titi</i></a></div>
<div class="test"><a href="../tutu"><i class="test tutu">tutu</i></a></div>

Note that the content of the classes is unknown but i want to have at the end an array which contain in this case :

["test toto", "test titi", "test tutu"]

So you specifically want the `` element classes, and *not* the `
` classes, right? — Niet the Dark Absol, Dec 03 '14 at 16:24

Casimir et Hippolyte · Answer 1 · 2014-12-03T16:34:51.110

2

A better way with PHP is to use XPath:

$dom = new DOMDocument();
@$dom->loadHTML($yourhtml);

$xpath = new DOMXPath($dom);

$textNodeList = $xpath->query('//div[@class="test"]/a/i/@class');

foreach ($textNodeList as $textNode) {
    echo "\n" . $textNode->nodeValue;
}

Note: as Niet the Dark Absol notices it, if the div tag has several classes, you can replace the equality with contains(), so:

$textNodeList = $xpath->query('//div[contains(@class,"test")]/a/i/@class');

edited Dec 03 '14 at 16:34

answered Dec 03 '14 at 16:27

Casimir et Hippolyte

88,009
5
94
125

1

I would suggest `[contains(@class,'test')]` to improve support for more than a single class on the containers. – Niet the Dark Absol Dec 03 '14 at 16:31
@NiettheDarkAbsol: I will add a note about. – Casimir et Hippolyte Dec 03 '14 at 16:31

score 2 · Accepted Answer · answered Dec 03 '14 at 16:31

Try

var j = $.map($("[class]"), function(val, key) {
  return $(val).find("[class]").attr("class")
});

var j = $.map($("[class]"), function(val, key) {
  return $(val).find("[class]").attr("class")
});
$("body").append(JSON.stringify(j, null, 4))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test"><a href="../toto"><i class="test toto">toto</i></a></div>
<div class="test"><a href="../titi"><i class="test titi">titi</i></a></div>
<div class="test"><a href="../tutu"><i class="test tutu">tutu</i></a></div>

score 1 · Answer 3 · answered Dec 03 '14 at 16:25

1

You could do it by map and get

var arr = $('.test > a > i').map(function(){
    return this.className;
}).get();
console.log(arr);

answered Dec 03 '14 at 16:25

Amit Joki

58,320
7
77
95

Incorrect. Selector does not match the `` elements because they are `.test > a > i`, not `.test > i` ;) – Niet the Dark Absol Dec 03 '14 at 16:29

score 0 · Answer 4 · answered Dec 03 '14 at 16:26

try this regex:

<i.+?class="(.+)"

javaScript Code:

var re = /<i.+?class="(.+)"/g;
var str = '<div class="test"><a href="../toto"><i class="test toto">toto</i></a></div>\n<div class="test"><a href="../titi"><i class="test titi">titi</i></a></div>\n<div class="test"><a href="../tutu"><i class="test tutu">tutu</i></a></div>';
var m;

while ((m = re.exec(str)) != null) {
if (m.index === re.lastIndex) {
re.lastIndex++;
}
// View your result using the m-variable.
// eg m[0] etc.
}

[You can't parse \[X\]HTML with regex.](http://stackoverflow.com/a/1732454/1529630) — Oriol, Dec 03 '14 at 16:35

MH2K9 · Answer 5 · 2014-12-03T16:46:24.360

0

Using jQuery map()

var arr = [];
$('.test a i').map(function(){
    arr.push(this.className);
});
console.log(arr);

Using PHP regex

$pattern = '/<i class="test(.*)(">)/';
preg_match_all($pattern, $html, $m);
$arr = array_map(function($v){
    return "test " . $v;
}, $m[1]);

print '<pre>';
print_r($arr);
print '</pre>';

Regex Demo

edited Dec 03 '14 at 16:46

answered Dec 03 '14 at 16:30

MH2K9

11,951
7
32
49

You copied @Amit Joki answer. – Scott Dec 03 '14 at 16:31
2

@Scott Erm, no? Amit's answer uses `.map` properly, this one doesn't :p So if it *is* a copy, it's a bad one. – Niet the Dark Absol Dec 03 '14 at 16:32

Need regex to extrude class values

5 Answers5