<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script type='text/javascript' src="./dist/React.js"></script> 
    <!-- <script type='text/javascript' src="./test/react.js"></script>
     <script type='text/javascript' src="./test/react-dom.js"></script> -->
     <style>
      .example-enter {
        opacity: 0.01;
      }
  
      .example-enter.example-enter-active {
        opacity: 1;
        transition: opacity 500ms ease-in;
      }
  
      .example-leave {
        opacity: 1;
      }
  
      .example-leave.example-leave-active {
        opacity: 0.01;
        transition: opacity 300ms ease-in;
      }
    </style>
     <script type='text/javascript' src="./react-transition-group.js"></script>
   <script src="./lib/babel.js"></script>
    <script>
var str = '{{{{a}}}}x{{ name }} — {{age}}!!';
var data = {
  name: 'abc',
  age: 18,
  a: 'A'
}


function render(str, data) {
  var reger = /\{\{([^{}]+?)\}\}/gm
  // var reger = /\{{2,3}\/?[^\}{2, 3}}]*\}{2, 3}/gm
  var result = str.replace(reger, function(s, b){
   
    if(data[b]) return data[b];
    return ''
  })
  document.write(result)
}

render(str, data)
       </script>
</head>

<body>

    <div>这个默认会被清掉</div>
    <div id='content'></div>


</body>

</html>