1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Title</title>
    6.   <style>
    7.     * {
    8.       margin: 0;
    9.       padding: 0;
    10.     }
    11.     input {
    12.       width: 200px;
    13.       height: 50px;
    14.       line-height: 50px;
    15.       padding: 10px;
    16.       font-size: 20px;
    17.     }
    18.     button {
    19.       width: 80px;
    20.       height: 50px;
    21.       line-height: 50px;
    22.       font-size: 20px;
    23.     }
    24.     #info {
    25.       margin-top: 15px;
    26.       width: 220px;
    27.       height: 50px;
    28.       line-height: 50px;
    29.       font-size: 20px;
    30.       text-align: center;
    31.       color: #00b38a;
    32.       border: 1px solid darkmagenta;
    33.     }
    34.     .container {
    35.       margin: 30px auto;
    36.       width: 400px;
    37.     }
    38.   </style>
    39. </head>
    40. <body>
    41. <div class="container">
    42.   <div>
    43.     <input type="text" id="input" placeholder="请输入身份证号">
    44.     <button id="btn">查询</button>
    45.   </div>
    46.   <div id="info">请输入身份证号</div>
    47. </div>
    49. <script>
    50.   // 根据身份证号，展示这个身份证号籍贯（省+市）
    51.   let provinceDatabase = {
    52.     '13': {
    53.       title: '河北省',
    54.       cities: {
    55.         '06': '保定',
    56.         '02': '唐山',
    57.         '01': '石家庄',
    58.         '07': '张家口',
    59.         '04': '邯郸'
    60.       }
    61.     },
    62.     '41': {
    63.       title: '河南省',
    64.       cities: {
    65.         '04': '许昌',
    66.         '27': '周口',
    67.         '30': '固始'
    68.       }
    69.     },
    70.     '37': {
    71.       title: '山东省',
    72.       cities: {
    73.         '01': '济南',
    74.         '02': '青岛',
    75.         '07': '潍坊',
    76.         '10': '威海'
    77.       }
    78.     },
    79.     '36': {
    80.       title: '江西省',
    81.       cities: {
    82.         '01': '南昌',
    83.         '02': '景德镇'
    84.       }
    85.     },
    86.     '44': {
    87.       title: '广东省',
    88.       cities: {
    89.         '01': '广州',
    90.         '02': '韶关'
    91.       }
    92.     },
    93.     '42': {
    94.       title: '湖北省',
    95.       cities: {
    96.         '01': '武汉',
    97.         '08': '荆门'
    98.       }
    99.     }
    100.   };
    102.   // 获取元素对象
    103.   let btn = document.getElementById('btn');
    104.   let input = document.getElementById('input');
    105.   let info = document.getElementById('info');
    107.   // 点击的时候才有触发行为，所以需要绑定点击事件
    108.   let reg = /^(\d{2})(\d{2})\d{13}(?:\d|X)$/; // 捕获信息的正则
    110.   btn.onclick = function () {
    111.     // 点击事件触发时，执行这里面的代码
    112.     // 1. 要获取 input 中输入的内容：通过 input 元素对象的 value 属性
    113.     let val = input.value;
    114.     // console.log(val);
    115.     // 2. 要从输入的身份证号中，代表省的两位数字获取到，两位代表地级市的数字获取到（捕获）
    116.     let result = reg.exec(val); // result 就是捕获到的内容，第二项和第三项是我们需要的省市代码；
    117.     // console.log(result);
    118.     let [, provinceCode, cityCode] = result; // 通过解构赋值把省市代码从捕获结果取出
    119.     // console.log(provinceCode, cityCode);
    121.     // 3. 拿到数字，去数据中把数字对应的省市取出来
    122.     let target = provinceDatabase[provinceCode];
    123.     let province = target.title; // 从数据中把省获取到
    124.     let city = target.cities[cityCode]; // 从数据中获取省，再获取市
    125.     console.log(province, city);
    127.     // 4. 把得到的省市汉字插入到页面中 div#info 中
    128.     info.innerHTML = `${province} ${city}`;
    129.   }
    131. </script>
    132. </body>
    133. </html>