dom2jade.coffee - Select DOM element in Chrome debugger, export it to jade

dome2jade.js

// Usage: copy(dom2jade($0, 0)) 
// copy copies to clipboard, $0 is selected elem in dev tools, 0 is pre-indent needed
// The beauty about this is that it lets the browser handle quirky html

const dom2jade = function(elem, numIndents = 0) {
  const dom2tree = function(elem) {
    let text;
    if ((elem.nodeType === document.TEXT_NODE) && (elem.nodeValue.trim() !== "")) {
      text = elem.nodeValue.trim();
      if (text !== "") {
        return {type: elem.nodeType, text};
      }

    } else if (elem.nodeType === document.ELEMENT_NODE) {
      const node = {};
      node.type = elem.nodeType;
      node.name = elem.nodeName.toLowerCase();
      node.id = elem.id;
      node.class = [];
      node.attrs = [];
      node.children = [];
      node.text = '';

      for (let item of Array.from(elem.classList)) {
        node.class.push(item);
      }

      for (let attr of Array.from(elem.attributes)) {
        if ((attr.name !== 'id') && (attr.name!== 'class')) {
          node.attrs.push({name:attr.name, value:attr.value});
        }
      }

      for (let child of Array.from(elem.childNodes)) {
        const childTree = dom2tree(child);
        if (childTree) {
          if ((node.children.length === 0) && (childTree.type === document.TEXT_NODE)) {
            node.text = childTree.text;
          } else {
            node.children.push(childTree);
          }
        }
      }

      return node;
    }
    return null;
  };

  const tree2json = node => JSON.stringify(node, null, 4);

  const genIndents = function(numIndents) {
    const str = [];
    for (let i = 0, end = numIndents; i < end; i++) {
      str.push("\t");
    }
    return str.join("");
  };

  const tree2jade = function(node, numIndents) {
    const str = [];
    str.push(genIndents(numIndents));

    if (node.type === document.TEXT_NODE) {
      str.push("| ", node.text, "\n");
    
    } else if (node.type === document.ELEMENT_NODE) {
      if ((node.name !== "div") || (!node.id && (node.class.length === 0))) { //ignore default div
        str.push(node.name);
      }

      if (node.id) {
        str.push(`#${node.id}`);
      }

      if (node.class.length) {
        for (let item of Array.from(node.class)) {
          str.push(`.${item}`);
        }
      }

      if (node.attrs.length) {
        str.push("(");
        str.push(node.attrs.map(attr => attr.name + "=" + "\"" + attr.value.replace(/\"/g, "\\\"") + "\"").join(" "));
        str.push(")");
      }
      
      if (node.text) {
        const lines = node.text.split("\n");
        if ((lines.length === 1) && (node.text.length < 200)) {
          str.push(" ", node.text);
        } else { 
          str.push(".\n");
          for (let line of Array.from(lines)) {
            str.push(genIndents(numIndents + 1), line, "\n");
          }
        }
      }

      str.push("\n");
      
      if (node.children.length) {
        for (let child of Array.from(node.children)) {
          str.push(tree2jade(child, numIndents + 1));
        }
      }
    }

    return str.join("");
  };


  const tree = dom2tree(elem);
  const str = tree2jade(tree, numIndents);
  //console.log tree2json(tree)
  return str;
};