BFE.devAI解答 - JavaScript 代码题
143. Virtual DOM IV - JSX 1

解题思路：

本题要实现解析和生成 JSX 元素的功能。具体来说，要做的就是将 JSX 代码解析成 AST，然后生成对应的 JavaScript 代码。实现这种转换功能，通常有两种方式：手动解析和利用第三方库。

在本题中，考虑到目标仅仅是实现基本的 JSX 语法解析，我们可以选择手动解析的方式。一般而言，此方法可分为以下几步:

1. 在解析的过程中，按照一定的语法规则，逐个读取 JSX 源代码的字符；
2. 对字符作出分析和处理，逐渐凑出一颗 AST；
3. 最终，根据 AST 中的节点和属性信息，生成目标语言的代码。

由于本题数据要求仅仅是 HTML 的 tag，所以不能使用全概念的 AST 表示。

可以将规则简化为：

• 可以是文字、空格等文本
• 可以是一个 HTML tag。

再转换为一个 JSON 树，如下：

{
  "tag': "a",
  "attrs": null,
  "children": [
    "bfe.dev"
  ]
}

所需方法：

1. parse，将 JSX 代码解析为一颗 JSON 树。
2. generate，将 JSON 树渲染为目标字符串。

由于本题只涉及 tag 名称和文本，对于 parse 方法，可以直接使用正则表达式匹配 tag 名称和文本内容，按照 tag 标签的嵌套顺序生成嵌套的 JSON 树。generate 方法则根据节点类型递归生成生成目标语言的字符串。具体实现可参考以下代码。

function parse(str) {
  const result = []
  const tags = []

  let index = 0
  while (index < str.length) {
    // 处理 tag
    const startTag = str.indexOf('<', index)
    const endTag = str.indexOf('>', startTag)
    if (startTag === -1 || endTag === -1) {
      throw new Error('JSX Error!')
    }

    // 处理 tag 之前的文本
    const text = str.slice(index, startTag)
    if (text.trim()) {
      result.push(text)
    }

    // 处理 tag 中的部分
    const tagStr = str.slice(startTag + 1, endTag)
    if (tagStr[0] === '/') {
      if (tags.length === 0) {
        throw new Error('JSX Error!')
      }

      const tagName = tagStr.slice(1)
      const preTag = tags.pop()
      if (preTag !== tagName) {
        throw new Error('JSX Error!')
      }

      const lastTag = tags.slice(-1)[0]
      if (lastTag) {
        lastTag.children.push({
          type: 'tag',
          tag: preTag,
          attrs: null,
          children: result.splice(result.lastIndexOf(preTag) + 1)
        })
      }
    } else {
      const attrs = {}
      const name = tagStr.match(/\w*/)[0]
      const [, tagEnd] = str.slice(endTag - 1).match(/<\//) || [0, 0]
      const tagEndIndex = tagEnd && endTag - 1 + tagEnd.length

      const tagStartFlagIndex = endTag + 1
      let tagEndFlagIndex = tagStartFlagIndex
      while (str[tagEndFlagIndex] !== '<' || str[tagEndFlagIndex + 1] !== '/') {
        tagEndFlagIndex++
        if (tagEndFlagIndex >= str.length) {
          throw new Error('JSX Error!')
        }
      }

      const tagContent = str.slice(tagStartFlagIndex, tagEndFlagIndex)
      if (tagEnd) {
        result.push(tagContent)
      } else {
        tags.push(name)
        result.push({ type: 'tag', tag: name, attrs, children: [] })
      }
    }

    index = endTag + 1
  }

  if (tags.length > 0) {
    throw new Error('JSX Error!')
  }

  return result.filter(Boolean)  
}

function generate(json) {
  if (!json) {
    return ''
  }

  if (typeof json === 'string') {
    return json
  }

  const { type, tag, attrs, children } = json
  const childrenStr = children.map((child) => generate(child)).join('')
  if (type === 'text') {
    return childrenStr
  }

  const attrsStr = attrs ? ' ' + Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(' ') : ''

  return `<${tag}${attrsStr}>${childrenStr}</${tag}>`
}

该 parse 方法只是一个非常简单的实现，对于无效的 HTML 标签还有很大的缺陷，但它应该足以通过本题的测试用例。