Hi anyone one have a solution to extract specific information highlighted in red from below chunk of text.

"<h3 style="font-size: 12px; font-weight: bold;">PTW by Department Chart</h3> <p style="font-size: 11px;">Here's a chart showing the number of permits (PTW) by department based on the provided data: <ul style="font-size: 11px;"> <li>The chart displays the count of permits for each department, sorted in descending order.</li> <li> PAINTING has the highest number of permits at 5,255, followed by  HULL - 3478 with 2,929 permits.</li> <li>The departments with the lowest number of permits are INFORMATION TECHNOLOGY (2), EHS () (4), and TRAINING (5).</li> </ul></p> <div id="chart"></div> <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script> <script> var options = { chart: { type: 'bar', height: 500 }, series: [{ name: 'Permits', data: [5255, 2929, 1870, 1561, 905, 617, 314, 267, 164, 120, 83, 67, 57, 9, 5, 4, 2] }], xaxis: { categories: [' PAINTING', ' HULL - 3478', ' HULL - 1256', ' PIPING', ' ELECTRICAL', ' MECHANICAL', ' FACILITIES', ' GEN FITTING', ' STAGING', ' QA', ' ESC', ' TRANSPORTATION', ' INSULATION', ' DOCKING', 'TRAINING', 'EHS ()', 'INFORMATION TECHNOLOGY'], labels: { rotate: -45, trim: true } }, yaxis: { title: { text: 'Number of Permits' } }, title: { text: 'Permits by Department', align: 'center' } } var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); </script> <p style="font-size: 11px;">Summary: The chart illustrates the distribution of permits across different departments.  PAINTING leads with the highest number of permits, while departments like INFORMATION TECHNOLOGY and EHS () have significantly fewer permits. This visualization helps identify which departments are most active in permit requests and may require more attention or resources for permit management.</p>"

I try to use Outsystems substr

But the result seems to be inconsistent not sure what i had done wrong.

If you had a better way kindly let me know. Thank you in advance