json-preview/index.html at master · JasonBai007/json-preview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
  <title>Mock数据照妖镜</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/Mock.js/1.0.1-beta3/mock-min.js"></script>
  <style>
    h3 {
      text-align: center
    }

    h3 a {
      color: #16A085
    }

    .wrap {
      display: flex;
      padding: 0px 50px;
      position: relative;
    }

    textarea {
      padding: 10px;
    }

    textarea:focus {
      outline: none;
    }

    #json {
      flex-grow: 1;
      background: #ECF0F1;
      overflow-y: auto;
      padding: 10px;
      max-height: 456px;
    }

    pre {
      margin: 0;
      font-weight: bold;
      font-size: 16px;
    }

    .string {
      color: #1ABC9C;
    }

    .number {
      color: #E67E22;
    }

    .boolean {
      color: #9B59B6;
    }

    .null {
      color: magenta;
    }

    .key {
      color: #3498DB;
    }

    #copy {
      position: absolute;
      right: 85px;
      bottom: 20px;
    }

    #copy:hover {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <h3>欢迎使用 <a href="http://mockjs.com/examples.html" target="_blank">mock</a> 数据可视化工具</h3>
  <div class="wrap">
    <!-- 文本输入框 -->
    <textarea name="inputarea" id="inputarea" cols="46" rows="30" placeholder="请输入mock.js语法格式的标准JSON（必须双引号）">
      {
        "example|6": [{
          "name": "@cname",
          "sex":"@boolean",
          "age":"@integer(1,100)"
        }]
      }
    </textarea>

    <!-- 结果展示区域 -->
    <div id="json">
      <pre></pre>
    </div>

    <button id="copy">复制</button>
  </div>

  <script>

    // 模拟假数据示例，仅供参考，必须是双引号
    // Mock.mock({
    //   "data|5": [{
    //     "name": "@cname"
    //   }]
    // })
    let jsonBeforeHighlight = '';
    const leftInput = document.querySelector('[name="inputarea"]');
    render(leftInput.innerHTML)

    // 监听文本域输入框
    leftInput.addEventListener('keyup', e => {
      if (e.target.value === '') {
        document.querySelector('#json pre').innerHTML = ''
      } else {
        render(e.target.value)
      }
    })

    function render(input) {
      // 获取文本域输入的内容，解析成JSON对象，然后构建出mock数据
      let mockData = Mock.mock(JSON.parse(input))
      // 字符化并格式化构建的mock数据
      let result = JSON.stringify(mockData, null, 4)
      // 缓存中间态
      jsonBeforeHighlight = result
      // 将加工后的JSON字符串赋值给Pre节点
      document.querySelector('#json pre').innerHTML = syntaxHighlight(result)
    }


    // 为格式化后的JSON字符串，添加class类
    function syntaxHighlight(json) {
      json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
      return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, match => {
        let cls = 'number';
        if (/^"/.test(match)) {
          if (/:$/.test(match)) {
            cls = 'key';
          } else {
            cls = 'string';
          }
        } else if (/true|false/.test(match)) {
          cls = 'boolean';
        } else if (/null/.test(match)) {
          cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
      });
    }

    // 实现一键复制功能
    document.querySelector('#copy').addEventListener('click', () => {
      // 使用textarea支持换行，使用input不支持换行
      const textarea = document.createElement('textarea');
      textarea.value = jsonBeforeHighlight;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('copy');
      document.body.removeChild(textarea);
    })

  </script>
</body>

</html>