JSFiddle - React, Tailwind, and code Playground

by Sillvva

HTML

<script src="http://lovasoa.github.io/tidy-html5/tidy.js"></script>
<div id="input">
<div class="dnd5e chat-card damage-card">
  <div class="card-header">
    <details>
      <summary><a style="color: #A00; font-size: 1.25em;">Eldritch Blast</a></summary>
      <table style="margin: 2px 0px; border: 1px solid #333; width: 100%; border-spacing: 0; border-collapse: collapse; background-color: #DDD;">
        <tr><td colspan="2"><i>Evocation cantrip</i></td></tr>
        <tr>
          <td><strong>Casting Time</strong></td>
          <td>1 action</td>
        </tr>
        <tr>
          <td><strong>Range</strong></td>
          <td>120 feet</td>
        </tr>
        <tr>
          <td><strong>Components</strong></td>
          <td>V S</td>
        </tr>
        <tr>
          <td><strong>Duration</strong></td>
          <td>Instantaneous</td>
        </tr>
      </table>
    </details>
  </div>
  <div class="card-content">
    <p><strong>Attack:</strong> <span class="normal-roll @{atk1|crit|1|?{:Hexblade's Curse|2}} @{atk1|fumble|1}">[[@atk1:1d20+{{prof}}+{{cha.mod}}]]</span> | <span class="normal-roll @{atk2|crit|1|?{:Hexblade's Curse|2}} @{atk2|fumble|1}">[[@atk2:1d20+{{prof}}+{{cha.mod}}]]</span> vs AC</p>
    <normaldamage>
      <p><strong>Hit:</strong> [[1d10]] force damage</p>
      ?{[checkbox|]Damage Bonuses|Hexblade's Curse,<p><strong>Hexblade's Curse:</strong> {{prof}} necrotic damage</p>,19|Hex,<p><strong>Hex:</strong> [[1d6]] necrotic damage</p>}
    </normaldamage>
    <details class="normal-roll @{atk1|crit|1|?{:Hexblade's Curse|2}} @{atk2|crit|1|?{:Hexblade's Curse|2}}">
      <summary><a>Critical Hit</a></summary>
      <criticaldamage>
        <p>[[1d10]] force damage</p>
        ?{:Hex}
      </criticaldamage>
    </details>
  </div>
</div>
</div>

<pre id="output">

</pre>

JavaScript

let options = {
    "indent-spaces":4,
    "wrap":80
};

var html = document.querySelector("#input").innerHTML;
var result = tidy_html5(html, options);
document.querySelector("#output").innerHTML = result;
console.log(result);