HTML to Emmet

html2emmet.js

const jsdom = require('jsdom')
const { JSDOM } = jsdom

function allDescendants (html, node) {
  for (let i = 0; i < node.children.length; i++) {
    const child = node.children[i]
    let s = '+('
    if (i === 0) {
      s = '>'
    }

    html.push(s)
    html.push(`${child.tagName.toLowerCase()}`)

    allAttributes(html, child)

    if (child.children && child.children.length > 0) {
      allDescendants(html, child)
    }

    if (s === '+(') {
      html.push(')')
    }
  }
}

function allAttributes (html, node) {
  if (node && node.attributes && node.attributes.length > 0) {
    const attrs = node.attributes
    const na = []
    for (let i = attrs.length - 1; i >= 0; i--) {
      na.push(`${attrs[i].name}="${attrs[i].value}"`)
    }
    html.push(`[${na.join(' ')}]`)
  }
}

function createEmmet (snippet) {
  const html = []
  const dom = new JSDOM(snippet)

  allDescendants(html, dom.window.document.body)

  return html.slice(1).join('')
}

console.log(createEmmet(`<mosaic-breadcrumb>
<ol>
  <li><a href="about:blank">Home</a></li>
  <li><a href="about:blank">Library</a></li>
  <li><a href="about:blank">Contents</a></li>
  <li><a href="about:blank">Technology</a></li>
  <li active>Data</li>
</ol>
</mosaic-breadcrumb>`))