zhangjin
/
web-app-v1


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>address-parse</title>
  <script src="js/bundle.js?v=1.2.11"></script>
</head>
<body>
<h1>address parse 地址解析测试</h1>
<div class="input">
  <textarea autocomplete="off" rows="3" placeholder="请输入地址" class="input__inner" id="input"></textarea>
  <div style="margin-left: 15px">
    <button class="parse__button" id="button">解析</button>
    <input type="checkbox" checked="checked" id="parseAll"> parseAll
  </div>
</div>
<div class="result">
  <div class="result__label">解析地址</div>
  <div class="result__value" id="address"></div>
</div>
<div class="result">
  <div class="result__label">解析结果</div>
  <div class="result__value">
    <pre><code id="result"></code></pre>
  </div>
</div>
<div class="result">
  <div class="result__label">全部结果</div>
  <div class="result__value">
    <pre><code id="resultAll"></code></pre>
  </div>
</div>
<script>
  document.getElementById('button').addEventListener('click', parse);

  window.onload = function () {
    var address = GetQueryValue('address');
    if (address) {
      document.getElementById('input').value = address;
      parse();
    }
  };

  function parse() {
    var address = document.getElementById('input').value;
    var parseAll = document.getElementById('parseAll').checked;
    var results = AddressParse.parse(address, parseAll);

    document.getElementById('address').innerHTML = address;
    document.getElementById('result').innerHTML = JSON.stringify(results[0] || {}, null, 2);
    document.getElementById('resultAll').innerHTML = JSON.stringify(results, null, 2);
  }

  function GetQueryValue(queryName) {
    var query = decodeURI(window.location.search.substring(1));
    var vars = query.split('&');
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split('=');
      if (pair[0] === queryName) {
        return pair[1];
      }
    }
    return '';
  }
</script>
</body>
<style>
  * {
    font-family: Open Sans, Helvetica Neue, Microsoft YaHei, Helvetica, Arial, sans-serif;
    font-size: 14px;
  }

  .result {
    margin-top: 15px;
    display: flex;
    width: 700px;
  }

  .result__label {
    width: 80px;
    color: #606266;
  }

  .result__value {
    flex: 1;
    color: #333;
  }

  .input {
    flex: 1;
    display: flex;
  }

  .input__inner {
    min-height: 33px;
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 700px;
  }

  .input__inner:focus, .parse__button:focus {
    outline: 0;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, .2);
  }

  .parse__button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 9px 15px;
    border-radius: 4px;
    background: #409eff;
    border: 1px solid #409eff;
    color: #fff;
  }

  .parse__button:active {
    background: #3a8ee6;
    border-color: #3a8ee6;
    color: #fff;
  }


  h1 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  pre {
    padding: 18px 24px;
    background-color: #fafafa;
    border: 1px solid #eaeefb;
    margin: 0;
  }
</style>
</html>