JavaScript Regex to match DIVs with specific class

Question

I am trying to match a RegEx for a string with HTML tags. More precisely, i have for example:

var myDivs = '<div class="wrapper"><div class="header1">Header1</div></div><div class="wrapper"><div class="header2">Header2</div></div>';

/* Result */
['<div class="wrapper"><div class="header1">Header1</div></div>', '<div class="wrapper"><div class="header2">Header2</div></div>']

I want to filter this string divs by class "wrapper" using RegEx on my Angular2 project. I'm not using jQuery.

Any help please.

score 1 · Accepted Answer · edited May 23 '17 at 12:02

1

You can not use regular expression to parse HTML (see this). Instead, you can use the native DOMParser like this:

function getElements(html, selector) {
  var parser = new DOMParser(); // the parser that will parse the html
  var dom = parser.parseFromString(html, "text/html"); // parse the text in 'html' as html
  var elems = dom.querySelectorAll(selector); // select the elements that match the CSS selector 'selector'
  // return their outerHTML (elems is an array like object so map is not defined thus we have to call it in this way)
  return Array.prototype.map.call(elems, function(e) {
    return e.outerHTML;
  });
}


var myDivs = '<div class="wrapper"><div class="header1">Header1</div></div><div class="wrapper"><div class="header2">Header2</div></div>';

console.log(getElements(myDivs, ".wrapper"));

Another approach: (the better one)

You can append the html to a div and then select only the matches elements inside that div:

function getElements(html, selector) {
  var div = document.createElement("div"); // the container element
  div.innerHTML = html; // set it's html to 'html'
  var elems = div.querySelectorAll(selector); // select the elements that match the CSS selector 'selector'
  // return their outerHTML (elems is an array like object so map is not defined thus we have to call it in this way)
  return Array.prototype.map.call(elems, function(e) {
    return e.outerHTML;
  });
}


var myDivs = '<div class="wrapper"><div class="header1">Header1</div></div><div class="wrapper"><div class="header2">Header2</div></div>';

console.log(getElements(myDivs, ".wrapper"));

Note: The selector could be anything (any valid CSS Selector). This is more flexible.

edited May 23 '17 at 12:02

Community

1
1

answered Feb 07 '17 at 00:40

ibrahim mahrir

31,174
5
48
73

Exactly what i wanted. I was open for suggestions. I never had problem like this, so I had no Idea what I had to do. Since i saw that this code works, I have one little question, in the array, in class, there is \"wrapper\". How can i take off the backslash? – Denis Feb 07 '17 at 00:50
@Denis There is no backslaches at all. That is just escaping the quotes `"`. Alert a result to see what it actually looks like! Or log it using your console instead of the snippet console! – ibrahim mahrir Feb 07 '17 at 00:53
Thank you man, you saved my life. I was near doing suicide with regex. Thank you. – Denis Feb 07 '17 at 00:56
@Denis I added another way to do it. This second way is much better because it work on older browsers as well! – ibrahim mahrir Feb 07 '17 at 01:04
Thank you. I have another question, I am building Ionic app, so i am trying to take care for processing. Does DOMParser renders HTML in dom? Using lazy scrolling, can this method be a problem in the future, for example after 5 requests, will application become slower or require more processing? – Denis Feb 07 '17 at 15:36
@Denis neither of the above ways render directly to your document. If you're using this a lot of times, I recommend using the second way because it's less overheaded I think. Plus it can work on older browsers as well. – ibrahim mahrir Feb 07 '17 at 15:46
Ok, Everything is clear. I tested it and it works. Thank you. – Denis Feb 07 '17 at 15:53

JavaScript Regex to match DIVs with specific class

1 Answers1