traverse.ts

console.log("LMAO");
import { HTMLElement, Node, parse, TextNode } from "node-html-parser";
const btnHtml = `<button type="button" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:z-10 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue active:bg-gray-100 active:text-gray-700 transition ease-in-out duration-150">
    <svg class="-ml-1 mr-2 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
    <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z" />
    </svg>
    <b>LMAO</b> 
    Bookmark
</button>`;
const root = parse(btnHtml, {});

let varCount = 0;
function parametrizeComponent(childNodes: Node[]) {
  for (const node of childNodes) {
    // console.log(node.text);
    if (node instanceof TextNode) {
      if (!node.isWhitespace) {
        node.rawText = `{{var${varCount++}}}`;
      }
    } else if (node instanceof HTMLElement) {
    } else {
      console.log(node);
    }
    if (node.childNodes.length) {
      parametrizeComponent(node.childNodes);
    }
  }
}
parametrizeComponent(root.childNodes);

console.log(root.toString());