我们在 JSX 中引用到了 style 变量和 greet() 函数，对于这些引用，在后期生成可执行代码时，会保持原样输出，直接引用当前作用域中的变量或函数。注意，我们可能覆盖不到 JSX 所有的语法规则，这里只做一个简单的演示即可，解析代码如下：

// 解析JSX
const parseJSX = function () {
  const TAG_LEFT = '<';
  const TAG_RIGHT = '>';
  const CLOSE_SLASH = '/';
  const WHITE_SPACE = ' ';
  const ATTR_EQUAL = '=';
  const DOUBLE_QUOTE = '"';
  const LEFT_CURLY = '{';
  const RIGHT_CURLY = '}';

  let at = -1;        // 当前解析的位置
  let stack = [];     // 放置已解析父结点的栈
  let source = '';    // 要解析的JSX代码内容
  let parent = null;  // 当前元素的父结点

  // 寻找目标字符
  let seek = (target) => {
    let found = false;

    while (!found) {
      let ch = source.charAt(++at);

      if (ch === target) {
        found = true;
      }
    }
  };

  // 向前搜索目标信息
  let explore = (target) => {
    let index = at;
    let found = false;
    let rangeStr = '';

    while (!found) {
      let ch = source.charAt(++index);

      if (target !== TAG_RIGHT && ch === TAG_RIGHT) {
        return {
          at: -1,
          str: rangeStr,
        };
      }

      if (ch === target) {
        found = true;
      } else if (ch !== CLOSE_SLASH) {
        rangeStr += ch;
      }
    }

    return {
      at: index - 1,
      str: rangeStr,
    };
  };

  // 跳过空格
  let skipSpace = () => {
    while (true) {
      let ch = source.charAt(at + 1);

      if (ch === TAG_RIGHT) {
        at--;
        break;
      }

      if (ch !== WHITE_SPACE) {
        break;
      } else {
        at++;
      }
    }
  };

  // 解析标签体
  let parseTag = () => {
    if (stack.length > 0) {
      let rangeResult = explore(TAG_LEFT);

      let resultStr = rangeResult.str.replace(/^\n|\n$/, '').trim();
      
      if (resultStr.length > 0) {
        let exprPositiOns= [];

        resultStr.replace(/{.+?}/, function(match, startIndex) {
          let endIndex = startIndex + match.length - 1;
          exprPositions.push({
            startIndex,
            endIndex,
          });
        });

        let strAry = [];
        let currIndex = 0;

        while (currIndex 
    if (source.charAt(at + 1) === CLOSE_SLASH) {
      at++;

      let endResult = explore(TAG_RIGHT);

      if (endResult.at > -1) {
        // 栈结构中只有一个结点 当前是最后一个闭合标签
        if (stack.length === 1) {
          return stack.pop();
        }

        let completeTag = stack.pop();

        // 更新当前父结点
        parent = stack[stack.length - 1];

        parent.children.push(completeTag);

        at = endResult.at;

        parseTag();

        return completeTag;
      }
    }

    let tagResult = explore(WHITE_SPACE);

    let elem = {
      tag: tagResult.str,
      attrs: {},
      children: [],
    };

    if (tagResult.at > -1) {
      at = tagResult.at;
    }

    // 解析标签属性键值对
    while (true) {
      skipSpace();

      let attrKeyResult = explore(ATTR_EQUAL);

      if (attrKeyResult.at === -1) {
        break;
      }

      at = attrKeyResult.at + 1;

      let attrValResult = {};

      if (source.charAt(at + 1) === LEFT_CURLY) {
        // 属性值是引用类型

        seek(LEFT_CURLY);

        attrValResult = explore(RIGHT_CURLY);
        
        attrValResult = {
          at: attrValResult.at,
          info: {
            type: 'ref',
            value: attrValResult.str,
          }
        };
      } else {
        // 属性值是字符串类型

        seek(DOUBLE_QUOTE);

        attrValResult = explore(DOUBLE_QUOTE);

        attrValResult = {
          at: attrValResult.at,
          info: {
            type: 'str',
            value: attrValResult.str,
          }
        };
      }

      at = attrValResult.at + 1;

      skipSpace();

      elem.attrs[attrKeyResult.str] = attrValResult.info;
    }

    seek(TAG_RIGHT);

    // 检测是否为自闭合标签
    if (source.charAt(at - 1) === CLOSE_SLASH) {
      // 自闭合标签 追加到父标签children中 然后继续解析
      if (stack.length > 0) {
        parent.children.push(elem);

        parseTag();
      }
    } else {
      // 有结束标签的 入栈 然后继续解析
      stack.push(elem);

      parent = elem;

      parseTag();
    }

    return elem;
  };

  return function (jsx) {
    source = jsx;
    return parseTag();
  };
}();

在解析 JSX 时，有以下几个关键步骤：

1. 解析到 `<` 时，表明一个标签的开始，接下来开始解析标签名，比如 div。
2. 在解析完标签名之后，试图解析属性键值对，如果存在，则检测 `=` 前后的值，属性值可能是字符串，也可能是变量引用，所以需要做个区分。
3. 解析到 `>` 时，表明一个标签的前半部分结束，此时应该将当前解析到的元素入栈，然后继续解析。
4. 解析到 `/>` 时，表明是一个自闭合元素，此时直接将其追加到栈顶父结点的 children 中。
5. 解析到 `

const App = (`
  

    

    

      
this is jsx-like code
      
      
parsing it now
      
    

    
    
  

`);

let root = parseJSX(App);

console.log(JSON.stringify(root, null, 2));

{
  "tag": "div",
  "attrs": {
    "className": {
      "type": "str",
      "value": "container"
    }
  },
  "children": [
    {
      "tag": "p",
      "attrs": {
        "style": {
          "type": "ref",
          "value": "style"
        }
      },
      "children": [
        {
          "type": "str",
          "value": "saying "
        },
        {
          "type": "expr",
          "value": "greet('scott')"
        },
        {
          "type": "str",
          "value": " hah"
        }
      ]
    },
    {
      "tag": "div",
      "attrs": {},
      "children": [
        {
          "tag": "p",
          "attrs": {},
          "children": [
            {
              "type": "str",
              "value": "this is jsx-like code"
            }
          ]
        },
        {
          "tag": "i",
          "attrs": {
            "className": {
              "type": "str",
              "value": "icon"
            }
          },
          "children": []
        },
        {
          "tag": "p",
          "attrs": {},
          "children": [
            {
              "type": "str",
              "value": "parsing it now"
            }
          ]
        },
        {
          "tag": "img",
          "attrs": {
            "className": {
              "type": "str",
              "value": "icon"
            }
          },
          "children": []
        }
      ]
    },
    {
      "tag": "input",
      "attrs": {
        "type": {
          "type": "str",
          "value": "button"
        },
        "value": {
          "type": "str",
          "value": "i am a button"
        }
      },
      "children": []
    },
    {
      "tag": "em",
      "attrs": {},
      "children": []
    }
  ]
}

// 将树状属性结构转换输出可执行代码
function transform(elem) {
  // 处理属性键值对
  function processAttrs(attrs) {
    let result = [];

    let keys = Object.keys(attrs);

    keys.forEach((key, index) => {
      let type = attrs[key].type;
      let value = attrs[key].value;

      // 需要区分字符串和变量引用
      let keyValue = `${key}: ${type === 'ref' ? value : '"' + value + '"'}`;

      if (index  {
      // 子结点是标签元素
      if (child.tag) {
        content += processElem(child, elem);
        return;
      }

      // 以下处理文本结点

      if (child.type === 'expr') {
        // 表达式
        content += child.value;
      } else {
        // 字符串字面量
        content += `"${child.value}"`;
      }

      if (index 

let root = parseJSX(App);

let code = transform(root);

console.log(code);

React.createElement(
  'div',
  {className: "container"},
  React.createElement(
    'p',
    {style: style},
    "saying ",
    greet('scott'),
    " hah"
  ),
  React.createElement(
    'div',
    null,
    React.createElement(
      'p',
      null,
      "this is jsx-like code"
    ),
    React.createElement(
      'i',
      {className: "icon"}
    ),
    React.createElement(
      'p',
      null,
      "parsing it now"
    ),
    React.createElement(
      'img',
      {className: "icon"}
    )
  ),
  React.createElement(
    'input',
    {type: "button", value: "i am a button"}
  ),
  React.createElement(
    'em',
    null
  )
);

const style = {
  color: 'red'
};

function greet(name) {
  return `hello ${name}`;
}

const App = React.createElement(
  'div',
  {className: "container"},
  React.createElement(
    'p',
    {style: style},
    "saying ",
    greet('scott'),
    " hah"
  ),
  React.createElement(
    'div',
    null,
    React.createElement(
      'p',
      null,
      "this is jsx-like code"
    ),
    React.createElement(
      'i',
      {className: "icon"}
    ),
    React.createElement(
      'p',
      null,
      "parsing it now"
    ),
    React.createElement(
      'img',
      {className: "icon"}
    )
  ),
  React.createElement(
    'input',
    {type: "button", value: "i am a button"}
  ),
  React.createElement(
    'em',
    null
  )
);