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>
|