espressione regolare per get un nome di class da html

So che la mia domanda potrebbe sembrare una duplicazione per questa domanda , ma non lo so
Sto cercando di corrispondere a un nome di class all'interno del text html che viene dal server come un model utilizzando JavsScript RegExp e sostituirlo con un altro nome di class. qui quello che sembra il codice:

<div class='abc d'></div> <!-- or --> <div class="abcd"></div> <!-- There might be spaces after and before the = (the equal sign) --> 

Vorrei per esempio abbinare la class "b"
con le più alte performance possibili

qui è un'espressione regolare che ho usato, ma non funziona in tutti i casi, e non so perché:

  var key = 'b'; statRegex = new RegExp('(<[\w+ class="[\\w\\s]*?)\\b('+key+')\\b([\\w\\s]*")'); html.replace( statRegex,'SomeOtherClass');// I may be mistake by the way I am replacing it here 

Utilizzando una regex, questo model dovrebbe funzionare per voi:

 var r = new RegExp("(<\\w+?\\s+?class\\s*=\\s*['\"][^'\"]*?\\b)" + key + "\\b", "i"); # Λ Λ Λ # |_________________________________________| | # ____________| | # [Creating a backreference] | # [which will be accessible] [Using "i" makes the matching "case-insensitive".]_| # [using $1 (see examples).] [You can omit "i" for case-sensitive matching. ] 

Per esempio

 var oldClass = "b"; var newClass = "e"; var r = new RegExp("..." + oldClass + "..."); "<div class='abc d'></div>".replace(r, "$1" + newClass); // ^-- returns: <div class='aec d'></div> "<div class=\"abcd\"></div>".replace(r, "$1" + newClass); // ^-- returns: <div class="aecd"></div> "<div class='abcd'></div>".replace(r, "$1" + newClass); // ^-- returns: <div class='abcd'></div> // <-- NO change 

NOTA:
Per il regex di cui sopra funzionare non deve essere ' o " all'interno della string di class.
Ie <div class="a 'b' cd"... non corrisponderà.

Usa il browser a tuo vantaggio:

 var str = '<div class=\'abcd\'></div>\ <!-- or -->\ <div class="abcd"></div>\ <!-- There might be spaces after and before the = (the equal sign) -->'; var wrapper = document.createElement('div'); wrapper.innerHTML = str; var elements = wrapper.getElementsByClassName('b'); if (elements.length) { // there are elements with class b } 

dimostrazione

getElementsByClassName() , getElementsByClassName() non è molto supportto in IE fino alla versione 9; controllare questa risposta per un'alternativa.

Le espressioni regolari non sono una buona misura per l'analisi di HTML. HTML non è regolare.

jQuery può essere una buona condizione qui.

 var html = 'Your HTML here...'; $('<div>' + html + '</div>').find('[class~="b"]').each(function () { console.log(this); }); 

Il selettore [class~="b"] selezionerà qualsiasi elemento che abbia un attributo di class contenente la parola b . L'HTML iniziale è avvolto all'interno di un div per rendere il metodo di find funziona correttamente.

Può darsi che questa non sia una soluzione per te, ma se non sei impostato su un match completo di regex, potresti fare (supponendo che i tuoi esempi rappresentino i dati da analizzare):

 function hasTheClass(html_string, classname) { //!!~ turns -1 into false, and anything else into true. return !!~html_string.split("=")[1].split(/[\'\"]/)[1].split(" ").indexOf(classname); } hasTheClass("<div class='abc d'></div>", 'b'); //returns true 

Prova qui: https://regex101.com/r/vnOFjm/1

regexp: (?:class|className)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]

 const regex = /(?:class|className)=(?:["']\W+\s*(?:\w+)\()?["']([^'"]+)['"]/gmi; const str = `<div id="content" class="container"> <div style="overflow:hidden;margin-top:30px"> <div style="width:300px;height:250px;float:left"> <ins class="adsbygoogle turbo" style="display:inline-block !importnt;width:300px;min-height:250px; display: none !importnt;" data-ad-client="ca-pub-1904398025977193" data-ad-slot="4723729075" data-color-link="2244BB" qgdsrhu="" hidden=""></ins> <img src="http://static.teleman.pl/images/pixel.gif?show,753804,20160812" alt="" width="0" height="0" hidden="" style="display: none !importnt;"> </div>`; let m; while ((m = regex.exec(str)) !== null) { // This is necessary to avoid infinite loops with zero-width matches if (m.index === regex.lastIndex) { regex.lastIndex++; } // The result can be accessed through the `m`-variable. m.forEach((match, groupIndex) => { console.log(`Found match, group ${groupIndex}: ${match}`); }); }