Select all DIVs with specific class including subdivs using REGEX in JavaScript only

Question

I want to select DIV(s) with specific class and all its content even if its includes another DIV elements. I cannot find any good regex for this in JS. The code below should return 2 DIVs.

var content = document.querySelector('textarea').value;
var matches = content.match(/<div class\="custom">(.*?)<\/div>/g);
console.log(matches);

textarea {
  width: 100%;
  height: 200px;
}

<textarea><div><div class="custom"><p>TEST</p><div>Another inner div</div><div class="another-class">Some text</div></div></div>
<p>Another text</p>
<div><div class="hello"><div class="custom another" data-custom="test-data"><div>Another inner div</div><p>TEST</p><div class="another-class">Some text</div></div></div></div></textarea>

Or for testing also: https://regex101.com/r/5TEMRq/1

I think it can be done easily only using javascript, REGEX will not needed. — artgb, Oct 19 '17 at 18:07
[Standard response to request to parse HTML with regex](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags). Why can't you use `document.querySelectorAll('custom')` ? — James, Oct 19 '17 at 18:08
Why don't you do `document.querySelectorAll('.custom')`. This will select all divs along with its childrens. — void, Oct 19 '17 at 18:08
I need to use regex, because I need to replace content of the tinyMCE editor. In this case the code above was only the example and I realized that it could be confusing to use DOM manipulation instead of regex, but in my case it should be still regex. I know that is better to avoid regex as mush as possible but I can use only JS and change string into DOM, than selecting the actual DIV(s), replacing it and than return it to string is more difficult I think. I also change the code for better understand what I need. — quarky, Oct 20 '17 at 07:25

score 1 · Answer 1 · edited Nov 04 '21 at 17:00

I'm not sure why you want to parse it using regex. I would recommend using the more specific DOM methods MDN to fetch it as below

//var content = document.querySelector('body').innerHTML;
//var matches = content.match(/<div class\="custom">(.
//*?)//<\/div>/g);
var content=document.getElementsByClassName('custom');
var conent2 =document.querySelector('.custom')
console.log(content);
console.log(conent2);

<div><div class="custom"><p>TEST</p><div>Another inner div</div><div class="another-class">Some text</div></div></div>
<p>Another text</p>
<div><div class="hello"><div class="custom another" data-custom="test-data"><div>Another inner div</div><p>TEST</p><div class="another-class">Some text</div></div></div></div>

Federico Piazza · Answer 2 · 2017-10-19T18:20:24.400

0

Regex is not the solution for your problem. You can only use a regex solution if your div is just a flat level and does not have any embedded div.

If that's the case then your regex would work.

However, if you have nested divs then a better approach is to use xhtml parser using a xpath or xquery selector and use an expression like this:

//div[@class="custom"]

edited Oct 19 '17 at 18:20

answered Oct 19 '17 at 18:11

Federico Piazza

30,085
15
87
123

I must be regex anyway. I found the solution that works on PHP: `
`. But this regex cannot be used with JS.
– quarky Oct 20 '17 at 07:31
@quarky you cannot solve this with a regex. There is not way to calculate the nested levels in a regex with a js engine – Federico Piazza Oct 20 '17 at 14:54

score 0 · Answer 3 · answered Oct 19 '17 at 18:15

You can simply do this:

document.getElementsByClassName('custom');

<div><div class="custom"><p>TEST</p><div>Another inner div</div><div class="another-class">Some text</div></div></div>
<p>Another text</p>
<div><div class="hello"><div class="custom another" data-custom="test-data"><div>Another inner div</div><p>TEST</p><div class="another-class">Some text</div></div></div></div>

Select all DIVs with specific class including subdivs using REGEX in JavaScript only

3 Answers3