regex example

// The regex:

/<status>\s?HP (\d+\/\d+)\s(\d+) Fire Ofuda\s+(\d+) Wind Ofuda\s+(\d+) Barrier Ofuda\s+(\d+) Water Ofuda\s+(\d+) Earth Ofuda\s+(\d+) Binding Ofuda\s+YIN: (\d)\/3\s+YANG: (\d)\/3\s+...\s+(READY|CHARGING)\s?<\/status>/g

// An example of the kind of string it's supposed to capture:

<status>
HP 40/135 2 Fire Ofuda 3 Wind Ofuda 0 Barrier Ofuda 0 Water Ofuda 2 Earth Ofuda 0 Binding Ofuda YIN: 0/3 YANG: 0/3 必殺技 CHARGING
</status>


// What the regex turns the string into:

<div style="background: linear-gradient(180deg, #6B7B8C 0%, #526474 50%, #3E4E5E 100%); border: 3px solid #606060; border-radius: 8px; padding: 20px; box-shadow: inset 0 0 0 2px #8090D0, inset 0 0 0 4px #6a7194; color: white; position: relative; image-rendering: pixelated; font-family: Consolas, monospace; font-size: 1.3em;">

  <div style="text-align:center; margin-bottom:10px;">STATUS</div>

  <div style="display:flex; justify-content:space-between; margin-bottom:6px;">
    <span><b>HP: </b>$1</span>
  </div>

  <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
    <span><b>$2</b> Fire Ofuda</span>
    <span><b>$3</b> Wind Ofuda</span>
    <span><b>$4</b> Barrier Ofuda</span>
  </div>

  <div style="display:flex; justify-content:space-between; margin-bottom:4px;">
    <span><b style="color:black;">$5</b> Water Ofuda</span>
    <span><b style="color:black;">$6</b> Earth Ofuda</span>
    <span><b style="color:black;">$7</b> Binding Ofuda</span>
  </div>

  <div style="display:flex; justify-content:space-between; margin-top:6px;">
    <span><b style="color:black;">YIN: </b>$8/3 ☯ <b>YANG: </b>$9/3</span>
  </div>

  <div style="margin-top:8px;">必殺技　<b>$10</b></div>
</div>