JavaScript Regex соответствует DIV с определенным классом

Question

Я пытаюсь сопоставить RegEx для строки с тегами HTML. Точнее, я есть, например:

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>'] 

Я хочу, чтобы фильтровать эту строку дивы классом «обертка» с использованием регулярных выражений в моем проекте Angular2. Я не использую jQuery.

Любая помощь пожалуйста.

Answer 1

Вы не можете использовать регулярное выражение для анализа HTML (см. this). Вместо этого, вы можете использовать родной DOMParser так:

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"));

Другой подход: (лучше один)

Вы можете добавить HTML-код в DIV, а затем выбрать только элементы спичек внутри этого 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"));

Примечание: Селектор может быть что угодно (любой действительный CSS Selector). Это более гибко.