abusing-processing-instructions-for-self-closing-elements-in-html.js

function processSelfClosingTags(string = '') {
  const dom = document.implementation.createHTMLDocument().createRange().createContextualFragment(string)

  function consumeNode(node = document.createElement('span')) {
    if (
      node.nodeType === 8
      && node.textContent.match(/^\?.+\?$/)
    ) {
      node.replaceWith(
        document.createElement(
          node.textContent.replace(/\?/g, '').trim()
        )
      )
    }

    // Process children
    if (node.childNodes.length) {
      node.childNodes.forEach(consumeNode)
    }

    return node
  }

  return consumeNode(dom)
}

let result = processSelfClosingTags(`Well <b>hello <?self-close?> there`)

// Well <b>hello <self-close></self-close> there!</b>