JavaScript正則表達式匹配具有特定類的DIV

Question

我試圖爲具有HTML標記的字符串匹配RegEx。更確切地說，我有，例如：

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項目中使用正則表達式來此字符串的div過濾。我沒有使用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）。這更靈活。