Regex match text between ul class

March 2, 2022

I have following html in a string i want to filter out just ul class mocha-stats in new variable how can i do that I have attached output for the same.

    var a = `<html>
            <head>
            </head>
            <body>
                <div id="mocha">
        
                    <div class="mocha-header">
                        <ul class="mocha-menu">
                            <li><span id="toggle-passes" class="toggle-passes">show failures only</span></li>
                        </ul>
                        <ul class="mocha-stats">
                            <li class="passes">passes: <em>6</em></li>
                            <li class="pending">pending: <em>1</em></li>
                            <li class="failures">failures: <em>1</em></li>
                            <li class="duration">duration: <em>15.3s</em></li>
                        </ul>
                        </ul>
                    </div>
        <div class = "b">
        </div>
        </html>`;
        
        
    var result = a.match(/<ul class="mocha-stats >(.*?)<\/ul>/g).map(function(val){
       return val.replace(/<\/?ul>/g,'');
});

output

var b =`         ` 
                <ul class="mocha-stats">
                    <li class="passes">passes: <em>6</em></li>
                    <li class="pending">pending: <em>1</em></li>
                    <li class="failures">failures: <em>1</em></li>
                    <li class="duration">duration: <em>15.3s</em></li>
                </ul>`;

>Solution :

If you have a DOM, do NOT use regexp

var a = `<html>
<head>
</head>
<body>
  <div id="mocha">
    <div class="mocha-header">
      <ul class="mocha-menu">
        <li><span id="toggle-passes" class="toggle-passes">show failures only</span></li>
      </ul>
      <ul class="mocha-stats">
        <li class="passes">passes: <em>6</em></li>
        <li class="pending">pending: <em>1</em></li>
        <li class="failures">failures: <em>1</em></li>
        <li class="duration">duration: <em>15.3s</em></li>
      </ul>
      </ul>
    </div>
    <div class="b">
    </div>
  </body>    
</html>`;
const fragment = document.createElement("div");
fragment.innerHTML = a;
const ul = fragment.querySelector(".mocha-stats");
console.log(ul.outerHTML)
const vals = [...ul.querySelectorAll("li em")]
  .map(em => ({[em.closest("li").className] : parseFloat(em.textContent)}));
console.log(vals)