JustHTML/showFile.html at main · sxxyrry/JustHTML · 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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <!-- <script src="./package/Marked/marked.umd.js"></script> -->
  <link rel="stylesheet" href="./assets/fonts/sliced/SarasaMonoSC/font.css">
  <style>
    body {
      background: #181818;
      margin: 10px;
      font-family: 'SarasaMonoSC-ExtraLightItalic';
    }

    * {
      color: #dbe2fa;
      font-family: 'SarasaMonoSC-ExtraLightItalic';
    }

    #Content {
      min-height: 4vh;
      max-height: 50vh;
      overflow-x: scroll;
      border-radius: 8px;
      border: #42446b solid 1px;
      /* overflow-y: scroll; */
      word-wrap: break-word;
      word-break: break-word;
      white-space: normal; /* 改为 normal 以启用自动换行 */
      line-height: 1.5;
    }

    .line-break {
      display: inline-block;
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-left: 2px;
    }

    #Content::-webkit-scrollbar {
      width: 8px;
    }

    #Content::-webkit-scrollbar-track {
      background: #181818;
      border-radius: 4px;
    }

    #Content::-webkit-scrollbar-thumb {
      background: #42446b;
      border-radius: 4px;
    }

    #Content::-webkit-scrollbar-thumb:hover {
      background: #5e4499;
    }
  </style>
</head>
<body>
  <div id="Content"></div>

  <p style="color: rgb(121, 121, 121); font-size: 15px;">
    提示：文字会自动换行，<br>
    &nbsp;&nbsp;自动换行会在结尾增加 “<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#808080" d="M19 7v4H5.83l3.58-3.59L8 6l-6 6l6 6l1.41-1.41L5.83 13H21V7z"></path></svg>”<br>
    &nbsp;&nbsp;如果你看到的在下一行，也是自动换行了！
  </p>

  <script type="module">
function getBase64DecodedContent(paramName) {
    const url = new URL(location.href);
    let encodedContent = url.searchParams.get(paramName);

    if (!encodedContent) {
        throw new Error(`参数 ${paramName} 不存在`);
    }

    // 解码 URL 参数，将 %xx 编码的字符转换回原始字符
    encodedContent = decodeURIComponent(encodedContent);

    // 移除空白字符
    encodedContent = encodedContent.replace(/\s/g, '');

    // 确保字符串是有效的 Base64 格式
    // 将 URL 安全的 Base64 的 - 替换为 +，_ 替换为 /
    let base64Content = encodedContent.replace(/-/g, '+').replace(/_/g, '/');

    // 确保 Base64 字符串长度是 4 的倍数，补上等号
    while (base64Content.length % 4 !== 0) {
         base64Content += '=';
    }

    // 验证 Base64 字符串只包含有效的 Base64 字符
    const validBase64Regex = /^[A-Za-z0-9+/=]+$/;
    if (!validBase64Regex.test(base64Content)) {
        throw new Error('Base64 编码无效');
    }

    // 将 Base64 解码为原始内容
    const binaryData = atob(base64Content);
    // 将二进制数据转换为字符串（处理 UTF-8）
    let bytes = new Uint8Array(binaryData.length);
    for (let i = 0; i < binaryData.length; i++) {
        bytes[i] = binaryData.charCodeAt(i);
    }
    return new TextDecoder('utf-8').decode(bytes);
}

    // const url = new URL(location.href)
    const content = getBase64DecodedContent('content')

    function addLineBreakSymbols() {
      const container = document.getElementById('Content');
      if (content.length === 0) {
        container.innerHTML = '未知内容';
        return
      }
      const words = content.split(''); // 按字符分割
      container.innerHTML = ''; // 清空容器

      let currentLine = '';
      const lineWidthElement = document.createElement('span');
      lineWidthElement.style.visibility = 'hidden';
      lineWidthElement.style.whiteSpace = 'nowrap';
      lineWidthElement.style.position = 'absolute';
      lineWidthElement.style.font = window.getComputedStyle(container).font;
      document.body.appendChild(lineWidthElement);

      // 获取容器的宽度
      const containerWidth = container.clientWidth - 20; // 减去一些边距
      const result = document.createDocumentFragment(); // 使用文档片段提高性能

      for (let i = 0; i < words.length; i++) {
        const char = words[i];
        const testLine = currentLine + char;
        lineWidthElement.textContent = testLine;

        if (char === '\n') {
          // 遇到换行符，添加当前行内容并换行，但不添加SVG
          if (currentLine) {
            result.appendChild(document.createTextNode(currentLine));
          }
          result.appendChild(document.createElement('br'));
          currentLine = '';
        } else if (lineWidthElement.clientWidth > containerWidth) {
          // 当前行超出容器宽度时，需要自动换行
          // 找到最后一个空格或制表符作为断点
          let breakPoint = -1;
          for (let j = currentLine.length - 1; j >= 0; j--) {
            if (currentLine[j] === ' ' || currentLine[j] === '\t') {
              breakPoint = j;
              break;
            }
          }

          if (breakPoint > 0) {
            // 在断点处分割行，添加前半部分和SVG
            const beforeBreak = currentLine.substring(0, breakPoint + 1);
            result.appendChild(document.createTextNode(beforeBreak));

            // 添加换行符SVG图标
            const div = document.createElement('div');
            div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#808080" d="M19 7v4H5.83l3.58-3.59L8 6l-6 6l6 6l1.41-1.41L5.83 13H21V7z"></path></svg>';
            div.alt = 'line break';
            div.className = 'line-break';
            result.appendChild(div);
            result.appendChild(document.createElement('br'));

            // 将断点后的部分和当前字符作为新行内容
            currentLine = currentLine.substring(breakPoint + 1) + char;
          } else {
            // 如果没有找到空格或制表符，直接添加SVG并开始新行
            if (currentLine.length > 0) {
              // 添加当前行的所有内容
              result.appendChild(document.createTextNode(currentLine));

              // 添加换行符SVG图标
              const div = document.createElement('div');
              div.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="#808080" d="M19 7v4H5.83l3.58-3.59L8 6l-6 6l6 6l1.41-1.41L5.83 13H21V7z"></path></svg>';
              div.alt = 'line break';
              div.className = 'line-break';
              result.appendChild(div);
              result.appendChild(document.createElement('br'));

              // 新行只包含当前字符
              currentLine = char;
            }
          }
        } else {
          currentLine += char;
        }
      }

      // 添加最后的行（不需要添加SVG）
      if (currentLine) {
        result.appendChild(document.createTextNode(currentLine));
      }

      document.body.removeChild(lineWidthElement);
      container.appendChild(result);
    }

    // 延迟执行，确保元素已渲染
    setTimeout(addLineBreakSymbols, 100);

    // 监听窗口大小变化，重新计算
    window.addEventListener('resize', addLineBreakSymbols);
  </script>
</body>
</html>